1

チェックボックスのリストにすべて/なしの選択機能を実装しようとしています。

[すべて選択] をクリックすると、3 つのチェックボックスが選択されます。壊れた例では、[すべて選択] をクリックしてもチェックボックスが更新されません。ただし、配列は更新されます。

このフィドルは機能します: Working Fiddle

このフィドルはそうではありません:壊れた例

2 つの唯一の違いは、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 に答える