挖空样式绑定在修改基础数据时不更新

Knockout style binding not updating on modification of underlying data

本文关键字：数据 更新 修改 样式 绑定      更新时间：2023-09-26

我有一个使用模板显示的对象数组。 该模板包含一个按钮，该按钮根据该对象是否存在于另一个数组中来更改颜色：

网页代码：

<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>

查看型号代码：

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);
    }
};

如果用户单击该按钮，则将为第二个数组添加或删除该项（取决于该数组中是否已存在该项）。

当页面呈现时，它会为每个对象正确调用 isSelectedForCompare(product) 函数，从而显示正确的颜色。 问题是，当用户单击按钮（颜色应该改变）时，不会再次调用isSelectedForCompare来计算新颜色，并且按钮不会改变。

单击该按钮会修改用于计算isSelectedForCompare(product)的数组，但 Knockout 似乎没有看到这是更新样式绑定的原因。

当我发布这个消息时，我意识到了我的错误：我不是在observableArray上调用数组修改函数，而是在评估的javascript数组上调用：

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

应该是：

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

这并没有给框架一个机会通知任何observableArray的订阅者数据已经改变。我已经修复了我的代码，它现在可以正常工作。

相关文章：