Knockout observableArray沒有更新

Question

我有一個observableArray，它不會在HTML中更新，即使我可以將它記錄到控制檯並看到它發生變化。我希望jsfiddle有一個控制檯，所以我可以展示那個部分。

在我發佈的示例中，我有一個人員列表，然後在該列表中搜索並嘗試將結果添加到新的observableArray。搜索結果observableArray絕不會在HTML中更新。

這裏是我的jsfiddle：http://jsfiddle.net/hMmgV/1/

這裏是我的代碼：

function AppViewModel() { 
    var self = this; 

    self.people = ko.observableArray([{ 
     fName: "Thomas", 
     lName: "Edison" 
    }, { 
     fName: "Sally", 
     lName: "Salputrio" 
    }, { 
     fName: "Edward", 
     lName: "Sparkleshine" 
    }, { 
     fName: "Jacob", 
     lName: "Wolfsson" 
    }]); 
    self.searchResult = ko.observableArray([]); 
    self.searchFieldKo = ko.observable(""); 

    self.submitSearch = function() { 
     if (self.searchFieldKo() != "") { 
      self.searchResult().length = 0; 
      $.each(self.people(), function (pKey, pObj) { 
       $.each(pObj, function (pProp, pValue) { 
        if (pValue.toString().toLowerCase().indexOf(self.searchFieldKo().toLowerCase()) >= 0) { 
         self.searchResult().push(self.people()[pKey]); 
         console.log(self.searchResult()); 
        } 
       }) 
      }) 
     } else { 
      alert("Please type something."); 
     } 
    } 
} 

ko.applyBindings(new AppViewModel()); 

Answer 1

你有括號不必要集

self.searchResult().push(self.people()[pKey]); 

應該

self.searchResult.push(self.people()[pKey]); 

演示JSFiddle.

因爲當您編寫self.searchResult()您正在訪問observable中的underlaying數組。並且，當您推入該陣列時，KO將不會收到有關更改的通知，因此您需要在observableArray本身上使用push方法。

順便說一下，Knockout有一套很棒的useful array helpers，它可以簡化您的過濾邏輯。