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); 
});