Javascript 主干：为模型的每个实例激发渲染函数

我有4个模型实例。为什么渲染函数会触发四次？我希望它只渲染一次（并在每个模型中循环并发射一个把手模板）。在前端，如果我有四个模型实例，我会得到16个模板。如果我用错误的术语来描述这个，我深表歉意。我是个笨蛋

define(['handlebars', 'text!event-template'],
    function(Handlebars, EventTemplate) {

        var EventView = Backbone.View.extend({
            el: $('#event-list')[0],

            initialize: function(collection) {
                this.collection = collection;
                this.listenTo(this.collection, 'add', this.render);
                console.log('View Event : Initialized');
            },

            render : function() {
                var _el = this.$el; //refrencing the el: above

                _.each(this.collection.models, function(model) {
                    var template = Handlebars.default.compile($(EventTemplate).html());
                    _el.append(template(model.attributes));
                });
                console.log('rendering');
            }
        });
        return EventView;
    }
);

---

同步集合时，它会为添加到集合中的每个模型触发一个

add

。如果要绑定到

add

，我通常要做的是创建一个名为“append”的方法，将单个模型添加到视图中。

add

事件将在集合中迭代，因此您不需要在视图上使用“循环”来保持其干净，也不需要在添加到集合和添加到视图之间建立更多的一对一关系。所以我会把你的代码改成这个

define(['handlebars', 'text!event-template'],
    function(Handlebars, EventTemplate) {

        var EventView = Backbone.View.extend({
            el: $('#event-list')[0],

            initialize: function(collection) {
                this.collection = collection;
                this.listenTo(this.collection, 'add', this.append);
                console.log('View Event : Initialized');
            },

            append: function( model ) {
                var _el = this.$el; //refrencing the el: above
                var template = Handlebars.default.compile($(EventTemplate).html());
                _el.append(template(model.attributes));

                console.log('adding');
            }
        });
        return EventView;
    }
);

---

这是一个很好的实现。在此之后，如果您将模型自动“添加”到集合中，它将立即显示在DOM中

当我将此更改为“重置”时，渲染功能不再启动？我缺少导致集合重置的行？好的，因此您没有将集合同步到视图。让我为你们改变我的答案谢谢代码，更重要的是解释幕后发生了什么！不客气（请投票支持我。teehee=）。另外，如果您真的希望看到特定主干类的所有事件的幕后情况，请执行以下操作：

this.listenTo（this.collection，'all'，console.log）。非常有用！=）为什么不说
el:“#事件列表”
让主干网帮你处理？另外，您可以说
this.collection.each（函数（模型）{…}，this）
，以避免直接访问集合的
模型
，并在回调函数中获得正确的
this
。您还应该使用
mode.toJSON（）
而不是
model.attributes
，以避免意外地更改模型背后的属性。也可以将
把手.default.compile
调用移到
之外。每个
调用也一样，这样您只需做一次那部分工作。传统上，
初始化
获取一个
选项
对象作为其参数，如果其中一个选项被称为
collection
，那么主干将为您设置视图的
this.collection
。我同意@muistooshort的观点，可以进行大量重构，基本上只需要更多的经验来了解主干/下划线功能。但在Handlebar编译方面，也许他真的想绑定到这个“添加”事件，当您只想动态添加模型时，它会产生一些不错的效果。