Question

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

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>

查看型号代码：

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没有看到更新样式绑定的原因。

Answer 1

我一发布这个，就意识到自己的错误：我在observableArray上调用数组修改函数，但是在评估的javascript数组上调用：

pauv.Description = priceAndUsageVarianceRow.String("Description");
pauv.Week1Usage = priceAndUsageVarianceRow.Double("Week1Usage");
pauv.Week2Usage =  priceAndUsageVarianceRow.Double("Week2Usage");

应该是：

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

这并没有让框架有机会通知任何observableArray的订阅者数据已经改变。我已经修复了我的代码，现在它正常运行。

Knockout样式绑定未更新基础数据的修改

1 个答案: