当模板使用$ data绑定处理程序时,Knockout不会更新视图

Question

我正在尝试以某种方式编写我的KO模板,这似乎导致了Knockout的问题,Knockout停止更新视图.我希望尽可能避免在我的视图中有太多显式依赖项,所以当我编写一个模板来添加到文件附件列表时,我想我可以使用$data变量:

<script id="attachments-template" type="text/html">
    <input type="button" data-bind="attachments: $data" value="add">
</script>

和模板绑定:

<div data-bind="template: {name: 'button-add-data', data: attachments}"></div>

这样可以将实际属性映射到使用位置,而不是在随机模板中关闭.attachments在我的实际案例中,绑定处理程序包装了jQuery fileupload插件,但只是调用push(i++)显示问题.

var i = 0;
ko.bindingHandlers.attachments = {
    init: function(element, valueAccessor) {
        var files = valueAccessor();
        $(element).click(function() {
            files.push(i++);
        });
    }
};

var list = ko.observableArray();
var model= {
    attachments: list
};

这说明这一点,使用KO 2.2.0小提琴:http://jsfiddle.net/stofte/sWGkJ/小提琴也表明,对一个明确的属性绑定工作正常.

显然在KO和绑定上下文中有很多关于Google和SO的东西,但是我找不到关于绑定处理程序中$ data的使用的任何内容,我不确定我使用$ data打破了什么KO法则,但似乎能够做我想做的事情会很有意义吗？

Answer 1

看起来淘汰赛并不完全期望您将 an 传递observableArray到data模板绑定上的参数中。通常这就是 a 的foreach用途。似乎data期望常规对象能够正确运行（需要引用，除了它似乎以这种方式运行这一事实之外，找不到任何文档）。

使用您拥有的相同 JS 代码，最简单的解决方案似乎是将可观察数组直接包装在模板绑定中：

<script id="button-add-data" type="text/html">
    isObservable: <span data-bind="text: ko.isObservable(items)"></span><br>
    toJSON: <span data-bind="text: ko.toJSON(items)"></span><br>
    <input type="button" data-bind="attachments: items" value="doesnt update">
</script>
<div data-bind="template: {name: 'button-add-data', data: { items: attachments }}"></div>

或者，您可以覆盖模板绑定处理程序并创建一个可以传入的新参数，以简化这种类似的行为。链接：knockoutjs 重写绑定处理程序