Question

I am trying to implement select all/none functionality on a list of checkboxes.

Clicking select all should select the three checkboxes. In the broken example, clicking select all does not update the checkboxes. It does update the array however.

This fiddle works: Working Fiddle

This fiddle does not: Broken Example

The only difference between the two is that ko.mapping is called which does not seem to be setting up the observable array correctly.

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

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

What am I doing wrong?

Answer 1

The problem is that when you use ko.mapping, every property of the input becomes an observable.

That means in your first sample you can do:

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

while in your mapping sample you must do:

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/

---

Really clean would be this:

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

This would work in both cases. But in a controlled environment it’s not strictly necessary to use unwrapObservable() since you know that the value will always be the an observable or not.