ObservableArray僅刪除後更新UI

Question

我似乎已經偶然發現了一個有趣的KnockoutJS。

我有一個ko.obseravableArray對象。

我可以通過編程，在應用綁定之前向數組添加項目。當用戶界面更新它看起來是正確的。然後，當我點擊一個按鈕將一個項目添加到數組時，它看起來好像什麼也沒有發生。但是，當我從數組中移除項目時，UI將更新。

var Feature = function (desription, price) 
{ 
    var self = this; 

    var _description = desription; 
    self.description = ko.observable(_description); 

    var _price = price; 
    self.price = ko.observable(_price); 
} 

var ItemFeature = function(feature) 
{ 
    var self = this; 

    var _feature = feature; 
    self.feature = ko.observable(_feature); 
} 

var Item = function() 
{ 
    var self = this; 

    self.featuresList = [ 
    new Feature("Feature 1", 1.50), 
    new Feature("Feature 2", 2.00) 
    ]; 

    self.features = ko.observableArray(); 

    self.addNewFeature = function() { 
     self.features().push(new ItemFeature(self.featuresList[0])); 
    } 

    self.removeFeature = function (sender) { 
     self.features.remove(sender); 
    } 
} 

var _viewModel = new Item(); 
_viewModel.addNewFeature(); 
ko.applyBindings(_viewModel); 

而且標記：

<table> 
      <thead><tr> 
       <th>Feature</th> 
       <th>Cost</th> 
      </tr></thead> 
      <tbody data-bind="foreach: features"> 
       <tr> 
        <td><select data-bind="options: $root.featuresList, value: feature, optionsText:'description'"></select></td> 
        <td data-bind="text: feature().description"></td> 
        <td data-bind="text: feature().price"></td> 
        <td><a href="#" data-bind="click: $root.removeFeature">Remove</a></td> 
       </tr> 
      </tbody> 
     </table> 

     <a href="#" data-bind="click: addNewFeature">Add a feature</a> 

我也放在一起這樣的一個例子。 http://jsfiddle.net/Q6J6a/7/

我覺得我錯過了一些小東西，但它不會跳出來對我。

Answer 1

你想做的事：

self.features.push(new ItemFeature(self.featuresList[0])); 

而不是：

self.features().push(new ItemFeature(self.featuresList[0])); 

所以，你要叫push對observableArray而不是底層數組，所以它會通知用戶。

http://jsfiddle.net/rniemeyer/Q6J6a/8/