骨干渲染视图多次

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()可以添加注释器产品。