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 like [{"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() を試しました。しかし、私はそれを解決できませんでした。
ありがとうございました。