用数组淘汰复选框？

Question

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

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

我怎样才能使这项工作？

Answer 1

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

另请注意，我添加了一个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的简单发布/订阅系统。