Question

我知道这个话题已经解决了几次，但我在这里遇到了一些麻烦。我认为我有以下内容：

    <!-- ko foreach: documents -->
    <div>
        <input type="checkbox" data-bind="checked: $parent.checkItem(documentId)" />
    </div>
    <!-- /ko -->

在我的viewModel中：

var checkItem = function (checkedItem) {
    debugger;
    window.selectedDocuments.push(checkedItem);
};

我正在使用窗口，因为另一个资源需要访问此数组。

现在，当我加载页面时，checkItem会针对每个文档被点击一次，我认为不应该这样。我正在尝试监视已选择的文档，更新了数组（在本例中为selectedDocuments）。

这是我尝试的小提琴：

http://jsfiddle.net/PTSkR/36/

我该如何做到这一点？

Answer 1

我认为您应该做的就是使用checked数据绑定与可观察数组。当您检查项目时，Knockout将自动更新可观察数组。

另请注意，我添加了value绑定，将每个复选框的value绑定到documentId。

查看：

 <div> <input type="checkbox" data-bind="checked: $parent.selectedDocuments, value: documentId" /> </div>   <div> <span data-bind="text: $data"></span> </div> 

<强>视图模型：

var selectedDocuments = ko.observableArray(); var viewModel = { documents: [{"documentId": "1"}, {"documentId": "2"}, {"documentId": "3"}], selectedDocuments: selectedDocuments }; ko.applyBindings(viewModel);

示例： http://jsfiddle.net/PTSkR/37/

作为旁注，如果可能的话，我会避免将属性附加到window。您可以使用lightweight namespacing pattern或使用simple pub/sub system with KnockoutJS。

Answer 2

您需要将checked绑定绑定到observable或observableArray。绑定数组时，checked绑定添加并删除数组输入的value。

因此，在您的情况下，您可以将输入的value与documentId绑定到一个数组，这将导致一个id数组。然后，您可以使用computed来创建由这些ID表示的文档数组。

var viewModel = {
    documents: [{"documentId": "2"}, {"documentId": "3"}, {"documentId": "1"}],
    selectedDocumentIds: ko.observableArray()
};

//quick index to make lookup require less looping
viewModel.documentIndex = {};
ko.utils.arrayForEach(viewModel.documents, function(doc) {
   viewModel.documentIndex[doc.documentId] = doc; 
});

//computed to represent an array of the actual objects
viewModel.selectedDocuments = ko.computed(function() {
    return ko.utils.arrayMap(viewModel.selectedDocumentIds(), function(id) {
        return viewModel.documentIndex[id];
    });
});

此处示例： http://jsfiddle.net/rniemeyer/DCZKz/

带阵列的Knockout复选框？

2 个答案: