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的使用情况，我不知道我的用法是什么KO法则$ data，但似乎能够做我想做的事情很有意义吗？

Answer 1

看来，淘汰赛并不期望您在模板绑定上将observableArray传递给data参数。通常这就是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>

或者，您可以覆盖模板bindingHandler并创建可以传递的新参数，从而简化此类似行为。链接：knockoutjs overriding bindinghandlers

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

1 个答案: