敲除样式绑定不会在基础数据修改时更新

Question

I have an array of objects that I am displaying using a template. The template contains a button that changes colors depending on whether or not that object exists in another array:

HTML code:

<button type="button" class="btn btn-default productButton" data-bind="click: $root.selectForCompare, style: { color: $root.isSelectedForCompare($data) ? 'blue' : 'black' }">
    <span class="glyphicon glyphicon-duplicate"></span><br />Compare
</button>

View Model code:

self.isSelectedForCompare = function (product) {
    return indexOfProduct(self.compareItems(), product) !== -1;
};
self.selectForCompare = function (product) {
    var i = indexOfProduct(self.compareItems(), product);
    if(i === -1){
        self.compareItems().push(product);
    } else {
        self.compareItems().splice(i,1);
    }
};

If the user clicks on the button, the item will be added or removed for the second array (depending on whether or not it already exists in that array).

When the page renders it correctly calls the isSelectedForCompare(product) function for each of the objects which results in the correct colors being displayed. The problem is that when the user clicks on the button (and the color should change), isSelectedForCompare is not called again to calculate the new color and the button does not change.

Clicking the button modifies the array used to compute isSelectedForCompare(product) , but it doesn't appear that Knockout sees that a reason to update the style binding.

Answer 1

As soon as I posted this, I realized my mistake: I was calling the array modification functions not on the observableArray, but on the evaluated javascript array:

self.compareItems().push(product)
self.compareItems().splice(i,1);

Should be:

self.compareItems.push(product)
self.compareItems.splice(i,1);

This didn't give the framework a chance to notify any of the observableArray's subscribers that the data had changed. I've fixed my code and it is working correctly now.