Question

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

单击全选应选择三个复选框。在破碎的示例中，单击全选不会更新复选框。但它会更新阵列。

这个小提琴奏效：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()并不是绝对必要的，因为您知道该值始终是可观察的值。

Knockout映射无法使用复选框数组

1 个答案: