Knockout.js applyBindings兩次重複結果

Question

HTML

<table cellpadding="0" cellspacing="0" border="0"> 
<thead> 
    <tr><th width="483"><span>Product Name</span></th></tr> 
</thead> 
<tbody data-bind='foreach: basket.model.products()'> 
    <tr><td><div class="ml10 productDetails" data-bind="text: name"></div></td></tr>    
</tbody> 
</table>  

JavaScript代碼

var ProductLine = function(data) { 
    var self = this; 
    self.name   = ko.observable(data.name); 

}; 

function BasketModel(data) { 
    var self    = this;      
    self.initialData  = ko.observable(data);  
    self.products   = ko.observableArray(); 

    $.each(self.initialData().products,function(i,val){ 
     self.products.push(new ProductLine(this)); 
    }); 
} 
function renderBasket(data){   

    basket = { model: new BasketModel(data)}; 
    ko.applyBindings(basket.model); 
} 
$(document).ready(function(){ 
    var sampleData = [{"name":"product 1"},{"name":"product 2"}]; 
    renderBasket(sampleData); 
}); 

在i AJAX交內增加一個新的產品籃，我調用下面的功能與響應數據

renderBasket(response.data); 

示例響應數據如 [{「name」：「product 1」}，{「name」：「product 2」}，{ 「name」：「product 3」}];

起初： 錶行是這樣的：

product 1 
product 2 
product 3 

後，我添加一個新的產品 結果是：

product 1 
product 1 
product 1 
product 2 
product 2 
product 2 
product 3 
product 3 
product 3 

我試過ko.cleanNode和basket.model.products .removeAll（）在ko.applyBindings（basket.model）之前; 但我解決不了。

謝謝。

Answer 1

您只能撥打ko.applyBindings一次（從$(document).ready函數）。只要將產品推到observableArray上，你就可以走了。

查看http://jsfiddle.net/yCBJ8/5/的完整示例。

var ProductLine = function (data) { 
     var self = this; 
     self.name = ko.observable(data.name); 
    }, 
    BasketModel = function (data) { 
     var self = this; 

     self.products = ko.observableArray(); 

     self.addToBasket = function (d) { 
      $.each(d, function (i, v) { 
       self.products.push(new ProductLine(this)); 
      }); 
     }; 

     self.replaceBasket = function (d) { 
      self.products.removeAll(); 
      self.addToBasket(d); 
     }; 

     self.addToBasket(data); 
    }; 

$(document).ready(function() { 
    var initialData = [{"name": "product 1"}, {"name": "product 2"}], 
     basket = { 
      model: new BasketModel(initialData) 
     }; 

    ko.applyBindings(basket.model); 
});