observableArray行爲不清楚更換

Question

在我的視圖模型時，我有：

self.collaps = ko.observableArray([0,0,0,0,0,0,0]); 

self.shouldShow = function(index) { return self.collaps()[index]; }; 

我的測試DIV：

<div data-bind="visible: shouldShow(5)">Shown!</div> 

我data-bind一個按鈕click: show：

self.show = function() { 
    // 1. Index 5 gets true after 2 clicks!!? But UI never updates! 
    self.collaps()[5] = true; 

    // 2. This is push-ing in true starting at index 0 
    self.collaps.replace(self.collaps()[5], true); 

    // 3. If I combine the two, I get the behavior I want, I think :) 
    self.collaps()[5] = true; 
    self.collaps.replace(self.collaps()[5], true); 

}; 

這裏發生的事情？這樣做的正確方法是什麼？

---->JSFIDDLE for your pleasure! < ----

Answer 1

下面是從ko文檔報價：

關鍵點：一個observableArray軌道哪些對象是在陣列中， 不這些對象的狀態

簡單地將一個對象放入一個observableArray並不會使得該對象的所有屬性爲 他們自己是可觀察的。當然，如果你願意，你可以使這些屬性可觀察，但這是一個獨立的選擇。 observableArray只跟蹤它保存的對象，並在添加或刪除對象時通知監聽器。

所以當你改變數組項目的值knockout沒有通知。您可以使用valueHasMutated功能手動通知用戶：

self.show1 = function() { 
    self.test(self.test()+1); 

    self.collaps()[5] = true; 
    self.collaps.valueHasMutated(); 
};