knockout.js - 当模板使用 $data 绑定(bind)处理程序时， knockout 不更新 View

Question

我正在尝试以某种方式编写我的 KO 模板，它似乎会导致 Knockout 出现问题，它会停止更新 View 。我希望在我的 View 中尽可能避免过多的显式依赖，所以当我编写用于添加到文件附件列表的模板时，我想我可以使用 $data多变的:

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

和模板绑定(bind):

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

这会保留在使用站点中映射的实际属性，而不是在随机模板中关闭。 attachments在我的实际案例中，绑定(bind)处理程序包装了 jQuery 文件上传插件，但只是调用 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 显示这一点的 fiddle : http://jsfiddle.net/stofte/sWGkJ/ fiddle 还表明，对显式属性的绑定(bind)可以正常工作。

显然，Google 上有很多关于 KO 和绑定(bind)上下文的内容，但是我在绑定(bind)处理程序中找不到任何关于 $data 使用的信息，我不确定我在使用 $data 时违反了什么 KO 法律，但似乎能够做我想做的事情很有意义？

Answer 1

看来 knockout 并不完全期望您通过observableArray进入data模板绑定(bind)上的参数。通常这就是 foreach是为了。看来data期望常规对象行为正确(需要引用，除了它似乎以这种方式行为之外找不到任何文档)。

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

<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>

或者，您可以覆盖您的模板 bindingHandler 并创建一个可以传递的新参数，以简化这种类似的行为。
链接: knockoutjs overriding bindinghandlers