淘汰赛映射不适用于复选框数组

Question

我正在尝试在复选框列表上实现全选/全选功能。

单击全选应选中三个复选框。在损坏的示例中，单击全选不会更新复选框。但是它确实会更新数组。

这个小提琴有效：Working Fiddle

这个小提琴没有：Broken Example

两者之间的唯一区别是调用 ko.mapping 似乎没有正确设置可观察数组。

var initialData = {"Products":[{"Id":"1","Title":"Item 1"},{"Id":"2","Title":"Item 2"},{"Id":"3","Title":"Item 3"}]};  

var viewModel = ko.mapping.fromJS(initialData); 

我做错了什么？

Answer 1

问题在于，当您使用ko.mapping 时，输入的每个 属性都会变成observable。

这意味着在您的第一个示例中您可以：

viewModel.selectAll = function() {
    viewModel.checkedProducts.removeAll();
    ko.utils.arrayForEach(viewModel.Products(), function(product) {
        viewModel.checkedProducts.push(product.Id);  // Id is a plain value
    });
};

在您的映射示例中，您必须这样做：

viewModel.selectAll = function() {
    viewModel.checkedProducts.removeAll();
    ko.utils.arrayForEach(viewModel.Products(), function(product) {
        viewModel.checkedProducts.push(product.Id());  // Id is an observable!
    });
};

http://fiddle.jshell.net/ZeCWP/6/

---

真正干净的应该是这样的：

viewModel.selectAll = function() {
    viewModel.checkedProducts.removeAll();
    ko.utils.arrayForEach(viewModel.Products(), function(product) {
        viewModel.checkedProducts.push( ko.utils.unwrapObservable(product.Id) );
    });
};

这在这两种情况下都有效。但在受控环境中，并非绝对需要使用 unwrapObservable()，因为您知道该值将始终是可观察的。