javascript - 多次 Backbone 渲染 View

Question

我有一个backbone.js 应用程序，其中的 View 如下:

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() 您可以添加另一个产品。