4

我知道这个话题已经讨论过几次了，但我在这里遇到了一些麻烦。在我看来，我有以下几点：

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

在我的视图模型中：

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

我使用 window 是因为另一个资源需要访问这个数组。

现在，当我加载页面时，每个文档都会点击一次 checkItem，我认为它不应该这样做。我正在尝试监视已选择哪些文档，并保持数组更新（在本例中为 selectedDocuments）。

这是我的尝试：

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

我怎样才能使这项工作？

4

2 回答 2

5

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

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

看法： 

<!-- ko foreach: documents -->
    <div>
        <input type="checkbox" data-bind="checked: $parent.selectedDocuments, value: documentId" />
    </div>
<!-- /ko -->

<!-- ko foreach: selectedDocuments -->
        <div>
            <span data-bind="text: $data"></span>
        </div>
<!-- /ko -->

视图模型：

var selectedDocuments = ko.observableArray();

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

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

作为旁注，我会window尽可能避免附加属性。您可以使用轻量级命名空间模式或使用带有 KnockoutJS 的简单 pub/sub 系统。

于 2013-04-30T03:12:44.193 回答
0

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

因此，在您的情况下，您可以将输入value与 documentId 绑定到一个数组，这将产生一个 id 数组。然后，您可以使用计算来创建由这些 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/

于 2013-04-30T03:15:48.403 回答