Backbone.js 使主干等待渲染视图

Backbone.js 使主干等待渲染视图,backbone.js,Backbone.js,我是主干网的新手,我有一个对象集合和一个以列表形式显示它们的视图。设置该视图时,每次将对象添加到集合中时,都会重新渲染视图。这是非常低效的,因为如果我一次向集合中添加20个内容,那么在添加最后一个项目后只需要渲染一次时,它将被渲染20次。在我完成向集合中添加内容之前,如何使主干延迟渲染 这是我的密码: <html> <head> <meta charset="utf-8" /> <title>Looking

我是主干网的新手,我有一个对象集合和一个以列表形式显示它们的视图。设置该视图时,每次将对象添加到集合中时,都会重新渲染视图。这是非常低效的,因为如果我一次向集合中添加20个内容,那么在添加最后一个项目后只需要渲染一次时,它将被渲染20次。在我完成向集合中添加内容之前,如何使主干延迟渲染

这是我的密码:

<html>
    <head>
        <meta charset="utf-8" />
        <title>Looking At Underscore.js Templates</title>
    </head>
    <body>
        <script type="text/template" class="template">
            <ul id="petlist">
                <% _.each(model.pets, function(pet) { %>
                    <li><%- pet.name %> (<%- pet.type %>)</li>
                <% }); %>
            </ul>
        </script>

        <div id="container"/>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://underscorejs.org/underscore.js"></script>
        <script src="http://backbonejs.org/backbone-min.js"></script>
        <script type="text/javascript">

            var serviceData = [
                {
                    name: "Peaches",
                    type: "dog"
                },

                {
                    name: "Wellington",
                    type: "cat"
                },

                {
                    name: "Beefy",
                    type: "dog"
                }
            ];

            $(document).ready(function() {
                var Pet = Backbone.Model.extend({ 
                    name: null,
                    type: null
                });

                var Pets = Backbone.Collection.extend();

                var AppView = Backbone.View.extend({
                    updateUi: function(model) {
                        _.templateSettings.variable = "model";
                        var template = _.template($("script.template").html());
                        var model = { pets: model.collection.toJSON() };
                        var html = template(model);
                        $("#container").html(html);
                    }
                });

                var pets = new Pets();
                var av = new AppView();
                pets.bind("add", av.updateUi);
                pets.set(serviceData);
            });

        </script>
    </body>
</html>

查看下划线.js模板
  • ()
var serviceData=[ { 名称:“桃子”, 类型:“狗” }, { 名称:“惠灵顿”, 类型:“猫” }, { 名字:“比菲”, 类型:“狗” } ]; $(文档).ready(函数(){ var Pet=Backbone.Model.extend({ 名称:空, 类型:null }); var=Backbone.Collection.extend(); var AppView=Backbone.View.extend({ updateUi:函数(模型){ _.templateSettings.variable=“model”; var-template=u.template($(“script.template”).html(); var model={pets:model.collection.toJSON()}; var html=模板(模型); $(“#容器”).html(html); } }); var pets=新宠物(); var av=新的AppView(); pets.bind(“添加”,av.updateUi); pets.set(serviceData); });
您还可以创建一个名为add的额外方法。 因此,如果添加新对象,应用程序将只添加单个对象,而不是再次渲染孔集合

像这样的事情:

App.Model = Backbone.Model.extend();

App.Collection = Backbone.Collection.extend({
   model: App.Model
});

App.CollectionView = Backbone.View.extend({
   tagName: 'ul',
   render: function(){
     this.collection.each(function(model){
        var objView = new App.ModelView({ model: model });
        this.$el.append( objView.render().el );
     });
     return this;
   },

   showAddForm: function(){
     // Here you show the form to add another object to the collection
   },

   save: function(){
     // Take form's data into an object/array, then add it to the collection
     var formData = {
         type: $('select[name=type]').val(),
         name $('input[name=name]').val()
     };
     // Once added to the collection, take the object/array and...
     this.addElement(formData);
   },

   addElement: function(model){
     var modView = new App.ModelView({ model: model });
     this.$el.append( modView.render().el );
   }
 });

 App.ModelView = Backbone.View.extend({
    tagName: 'li',
    template: _.template( "<li><%= name %> (<%= type %>)</li>" ),

    render: function(){
       this.$el.html( this.template( this.model.toJSON() ) );
       return this;
    }
 });
App.Model=Backbone.Model.extend();
App.Collection=Backbone.Collection.extend({
型号:App.model
});
App.CollectionView=Backbone.View.extend({
标记名:“ul”,
render:function(){
此.collection.each(函数(模型){
var objView=newapp.ModelView({model:model});
这是.el.append(objView.render().el);
});
归还这个;
},
showAddForm:function(){
//这里显示了向集合中添加另一个对象的表单
},
保存:函数(){
//将表单的数据放入对象/数组中,然后将其添加到集合中
var formData={
类型:$('select[name=type]')。val(),
name$('input[name=name]')。val()
};
//添加到集合后,获取对象/数组并。。。
本附录(formData);
},
附录:功能(模型){
var modView=new App.ModelView({model:model});
这是.el.append(modView.render().el);
}
});
App.ModelView=Backbone.View.extend({
标记名:“li”,
模板:u.template(“
  • ()
  • ”), render:function(){ this.el.html(this.template(this.model.toJSON()); 归还这个; } });
    你明白了吗? 渲染孔集合时,collectionView渲染方法为每个对象/宠物调用模型视图。 因此,通过这种方式,当您获得新宠物/对象的信息时,您可以创建ModelView的实例,并将其附加到实际渲染视图中


    希望有帮助。

    您还可以创建一个名为add的额外方法。 因此,如果添加新对象,应用程序将只添加单个对象,而不是再次渲染孔集合

    像这样的事情:

    App.Model = Backbone.Model.extend();
    
    App.Collection = Backbone.Collection.extend({
       model: App.Model
    });
    
    App.CollectionView = Backbone.View.extend({
       tagName: 'ul',
       render: function(){
         this.collection.each(function(model){
            var objView = new App.ModelView({ model: model });
            this.$el.append( objView.render().el );
         });
         return this;
       },
    
       showAddForm: function(){
         // Here you show the form to add another object to the collection
       },
    
       save: function(){
         // Take form's data into an object/array, then add it to the collection
         var formData = {
             type: $('select[name=type]').val(),
             name $('input[name=name]').val()
         };
         // Once added to the collection, take the object/array and...
         this.addElement(formData);
       },
    
       addElement: function(model){
         var modView = new App.ModelView({ model: model });
         this.$el.append( modView.render().el );
       }
     });
    
     App.ModelView = Backbone.View.extend({
        tagName: 'li',
        template: _.template( "<li><%= name %> (<%= type %>)</li>" ),
    
        render: function(){
           this.$el.html( this.template( this.model.toJSON() ) );
           return this;
        }
     });
    
    App.Model=Backbone.Model.extend();
    App.Collection=Backbone.Collection.extend({
    型号:App.model
    });
    App.CollectionView=Backbone.View.extend({
    标记名:“ul”,
    render:function(){
    此.collection.each(函数(模型){
    var objView=newapp.ModelView({model:model});
    这是.el.append(objView.render().el);
    });
    归还这个;
    },
    showAddForm:function(){
    //这里显示了向集合中添加另一个对象的表单
    },
    保存:函数(){
    //将表单的数据放入对象/数组中,然后将其添加到集合中
    var formData={
    类型:$('select[name=type]')。val(),
    name$('input[name=name]')。val()
    };
    //添加到集合后,获取对象/数组并。。。
    本附录(formData);
    },
    附录:功能(模型){
    var modView=new App.ModelView({model:model});
    这是.el.append(modView.render().el);
    }
    });
    App.ModelView=Backbone.View.extend({
    标记名:“li”,
    模板:u.template(“
  • ()
  • ”), render:function(){ this.el.html(this.template(this.model.toJSON()); 归还这个; } });
    你明白了吗? 渲染孔集合时,collectionView渲染方法为每个对象/宠物调用模型视图。 因此,通过这种方式,当您获得新宠物/对象的信息时,您可以创建ModelView的实例,并将其附加到实际渲染视图中

    希望有帮助。

    您还可以:

    pets.set(serviceData, { silent: true });
    pets.trigger('add', pets);
    
    并修改av.updateUi以处理整个集合并立即创建HTML,但在这种情况下,“重置”事件可能比“添加”更合适。

    您还可以执行以下操作:

    pets.set(serviceData, { silent: true });
    pets.trigger('add', pets);
    

    并修改av.updateUi以处理整个集合并立即创建HTML,但在这种情况下,“重置”事件可能比“添加”更合适。

    您需要在代码中重新考虑一些内容。对于您的特定情况,您需要使用reset而不是set,以便在设置数据时仅调度一个事件。你也是