挖掘樣式綁定不更新修改底層數據

我有一個對象數組，我使用模板顯示。該模板包含一個按鈕取決於另一個陣列中是否存在該對象的顏色，改變：挖掘樣式綁定不更新修改底層數據

HTML代碼：

<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看不到更新樣式綁定的原因。

來源

2016-01-20 Gabe O' Leary

只要我貼這個，我才意識到我的錯誤：我打電話不上observableArray陣列修改功能，但評估的JavaScript陣列上：

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

應該是：

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

這並沒有給框架一個機會通知任何observableArray的訂閱者數據已經改變。我修復了我的代碼，現在它正在正常工作。

來源

2016-01-20 00:33:57

挖掘樣式綁定不更新修改底層數據

回答

相關問題