Question

我有一个项目，我无法弄清楚如何从容器模板调用的click事件访问observableArray。我在这里有一个简单的例子：

在模板中指定click事件，然后从项目本身的属性为每个项目动态加载模板。

所以示例项是：

{ID: 1, TemplateName: 'template1', Label: 'Name', Description: 'Your name'}

“父”模板如下所示：

<script type="text/html" id="tpl-placeholder">
<div class="entry" data-bind="click: $parent.RemoveEntry, attr: { id: ID}, template: {name: TemplateName }"></div>
</script>

动态加载的模板如下所示：

<script type="text/html" id="template1">
    <h1 data-bind="text: Label"></h1>
    <div data-bind="text: Description"></div>
</script>

在处理click事件的方法中 - 在本例中为RemoveEntry - 在尝试访问observableArray（Entries）时我得到null。

这是viewmodel：

var viewModel = {

    Name: ko.observable("Entries"),

    Entries: ko.observableArray( entries ),

    RemoveEntry: function (entry) {
        // how do I access the "Entries" list here - this.Entries returns null
        $("#debug").text(this.Entries == null);
        this.Entries.remove(entry);
    }
};

我是淘汰赛的新手......有人可以告诉我，我在这里做错了什么吗？谢谢！

Answer 1

您拥有它的方式，您可以直接访问viewmodel.Entries ...

然而，更典型的是你会这样做： -

http://jsfiddle.net/keith_nicholas/RAMcc/

使用优秀的javascript hack

var self = this;

Answer 2

在我原来的测试中，我发现我可以使用 viewModel.Entries 。我认为Keith的反应更好，这绝对是更典型的方法。为了完整起见，我会留在这里。

对于我的例子，这有效：

RemoveEntry: function (entry) {
    // how do I access the "Entries" list here - this.Entries returns null
    $("#debug").text(viewModel.Entries == null);
    viewModel.Entries.remove(entry);
}

如何在点击事件中访问observableArray？

2 个答案: