Backbone.js View to render a list partially? -

i plan create backbone.js view rendering list of items. list grow. seems me performance reasons should not empty , rebuild dom items. make sense? how approach this?

my typical setup kind of thing use define backbone.view ul or whatever containing element have , bind collection. define backbone.view render single list item. instances of view have one-to-one relationship models in collection.

collections have different events correspond nicely different types of dom operations need perform reflect them. map them this:

• sync = [render entire list on first fetch]
• add = this.$append(...)
• remove = [find corresponding list view item].remove()

ok, code hammered down memory , not tested, idea:

var collection = new backbone.collection({   model: backbone.model,   url: '/some/api/endpoint' });  var li = backbone.view.extend({   tagname: 'li',   initialize: function(){     this.render();   },   render: function(){     var template = _.template($('li-template').html());     this.el = template(model.tojson());   } });  var ul = backbone.view.extend({   collection:collection,   el: 'ul',   initialize: function(){     this.listitems = [];     this.collection.on('sync', this.addall);     this.collection.on('add', this.addone);     this.collection.on('remove', this.removeone);   },    addall: function(){     var frag = document.createdocumentfragment();     this.collection.foreach(function(model){       var view = new li({model: model});       frag.appendchild(view.el);       this.listitems.push(view);     });     this.el.appendchild(frag);   },    addone: function(model){     var view = new li({model: model});     this.el.appendchild(view.el);     this.listitems.push(view);   },    removeone: function(model){     (var = 0, num = this.listitems.length, item; < num; i++) {       view = this.listitems[i];       if (view.model.cid === model.cid) {         this.el.removechild(view.el);         this.listitems.splice(i, 1);       }     }   } });