1

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

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

这个小提琴有效：工作小提琴

这个小提琴没有：破碎的例子

两者之间的唯一区别是调用 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);

我究竟做错了什么？

4

1 回答 1

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()因为您知道该值将始终是可观察的或不可观察的。

于 2012-09-10T19:46:37.427 回答