5

我正在尝试以某种方式编写我的 KO 模板,它似乎导致了 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/小提琴还表明,对显式属性的绑定可以正常工作。

显然,Google 上有很多关于 KO 和绑定上下文的内容,但我找不到任何关于在绑定处理程序中使用 $data 的内容,我不确定我在使用 $data 时违反了哪些 KO 法律,但似乎能够做我想做的事情很有意义?

4

1 回答 1

1

看起来淘汰赛并不完全期望您将 an 传递observableArraydata模板绑定的参数中。通常这就是 aforeach的用途。似乎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 覆盖绑定处理程序

于 2012-12-25T07:49:31.590 回答