Question

我有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;
    }
);

Answer 1

当同步集合时，它会为添加到集合中的每个模型触发add。如果你想绑定到add，我通常会做一个名为＆＃34;追加＆＃34;的方法。向视图添加单个模型。 add事件将遍历集合，因此您不需要＆＃34;循环＆＃34;在视图上保持干净，并且在添加到集合和添加到视图之间更多的一对一关系。所以我会将你的代码更改为

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;
    }
);

这是一个很好的实现。在此之后，如果你＆＃34;添加＆＃34;该集合的模型会自动显示在DOM中。

Backbone：渲染函数为每个模型实例触发

1 个答案: