Question

I’m loading JSON data (array of objects) via service, onReady, and want to display this data in a grid. I have each row represented by a view.

        render: function(){
            var self = this;
            (self.collection.models).forEach( function(model){
                var rowView = new RowView({model: model});
                self.$el.append(rowView.render().el);
            });                
        }

Is it possible to build subviews and push them all at once to the DOM instead of going 1 by 1? Does the browser reflow & repaint happen on every append?

Ive seen all the ways people add subviews/children, but none of them solve the problem (frequent DOM access?) because this is just how backbone is built?

Answer 1

Yeah, that can be done. Generate an html element with jQuery (using the view’s tagName definition and attributes and all that) and then append everything to that. When you’re done, swap out the current this.$el with the new one:

render: function(){

  // create in memory element
  var $el = $(this.tagName);
  // also get the `className`, `id`, `attributes` if you need them

  // append everything to the in-memory element
  this.collection.each(function(model){
    var rowView = new RowView({model: model});
    $el.append(rowView.render().el);
  });

  // replace the old view element with the new one, in the DOM
  this.$el.replaceWith($el);

  // reset the view instance to work with the new $el
  this.setElement($el);
}

That should do it.

Of course, you’re going to see a bit of a flicker on the screen, depending on how fast the browser is and how large the change is. But this should get you down the road to do what you want.

More info about replaceWith: http://api.jquery.com/replaceWith/