骨干渲染視圖多次

Question

我有一個beta.js應用程序，其中有一個類似這樣的視圖：

var StoreView = Backbone.View.extend({
el: ".container",
initialize: function() {
    this.render();
},

events: {
    "click #addProduct": "addProduct",
},

render: function() {
    this.$el.html(render("index"));
},

addProduct: function(){
    var productView = new StoreProductView({
        el: $('#products')
    });
    productView.render();
}
});

和我的StoreProductView看起來像：

var StoreProductView = Backbone.View.extend({
render: function () {

    this.$el.html(render("products/product"));

    return this;
}
});

因此，當我單擊#addProduct時，將調用一個新的StoreProductView模板。 但是，如果再次點擊#addProduct，則什么也不會發生。 如何獲得它，以便每次點擊#addProduct時，都會呈現一個新的StoreProductView ？ 因此，如果我按x次點擊，就有x個StoreProductView ？

Answer 1

您需要更改此行：

this.$el.html(render("products/product"));

例如：

this.$el.append(render("products/product"));

因為每次您替換html和nw時都不會追加，所以僅刪除html內容並插入新內容。 使用append()可以添加注釋器產品。