Backbone multiple view render stack?

Question

There are a lot of similar answers to my question, but no what I want. My problem is: I render view in backbone router. One screen is build with three views and since rendering is async and I append every view to #content element I cant control the order of rendered elements. Any ideas? I don't want to mix rendering of views in other views. I want to control that in router class.

Meistro Meistro · Accepted Answer · 2013-10-05T21:23:32

Without seeing your code you do a couple things. If you wanted to drop in Marionette.js, you could use events to let your router know when it has rendered it.

App = new Marionette.Application(); // somewhere before you initialize your rotuer

// in your router
var viewsToRender = 3;
var view1El = new View({model: someModel}).render().el;
var view2El = new View({model: someModel2}).render().el;
...
App.vent.on('viewRendered', function() {
  viewsToRender -= 1;
  if(viewToRender === 0) {
    $('#content').append(view1El, view1E2, ...);
  }
});

// In your views
onRender: function() {
  App.vent.trigger('viewRendered');
}

onRender documentation

Or you could move the fetching of your async data outside of your views and into the router(the route I would probably take).

Backbone multiple view render stack?

1 Answers