Knockout.js applyBindings 两次重复结果答案

【问题标题】：Knockout.js applyBindings twice duplicate resultKnockout.js applyBindings 两次重复结果
【发布时间】：2013-03-20 23:01:22
【问题描述】：

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

当我在 ajax post 中将新产品添加到购物篮时，我使用响应数据调用下面的函数

renderBasket(response.data);

例如 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.applyBindings(basket.model); 之前尝试过 ko.cleanNode 和 basket.model.products.removeAll()；但是我解决不了。

谢谢。

【问题讨论】：

当我在“ajax 发布成功”上完成此操作时，它起作用了。但我认为这不应该是真正的解决方案。篮子.model.products.removeAll(); $.each(ajaxCevap.data.products,function(i,val){ basket.model.products.push(new ProductLine(this)); });
你不应该两次调用applyBindings，并且你不应该调用cleanNode，除非你知道你在做什么（几乎所有的标准用例都没有必要）。这个问题每月至少被问一次。请通过Knockout Tutorials

标签： knockout.js

【解决方案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);
});

【讨论】：

有一个错误 addToBasket' of object [object Object] is not a function 。但我明白了，非常感谢。