带有数组的淘汰赛复选框？答案

【问题标题】：Knockout checkboxes with array?带有数组的淘汰赛复选框？
【发布时间】：2013-04-30 11:15:48
【问题描述】：

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

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

在我的视图模型中：

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

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

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

这是我的尝试：

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

我怎样才能做到这一点？

【问题讨论】：

标签： knockout.js

【解决方案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。您可以使用lightweight namespacing pattern 或simple pub/sub system with KnockoutJS。

【讨论】：

哇，太棒了。谢谢安德鲁。 “如果可能的话，我会避免将属性附加到窗口。” - 为什么？
再次感谢伙计。我只是尝试实现 pub/sub 并且我非常接近让它工作，如果你有时间可以在这里发布问题：stackoverflow.com/questions/16307483/…

【解决方案2】：

您需要将checked 绑定绑定到可观察对象或可观察数组。当绑定到数组时，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/

【讨论】：