MarionetteJS: rendering only after a successful fetch model

Question

How to delay rendering until a model appears in Marionette? I can listen to the change event on the model, but then it will be displayed twice. Is there an elegant solution?

Manager.module 'Views', ( Views, App, Backbone, Marionette, $) -> class UserDetail extends Marionette.ItemView template: 'manager.users.detail' initialize: => @model = new App.Models.ManagerUser( ) return onBeforeRender: => @username = 'test' # Comes from URL @model.fetch() return serializeData: -> data = @model.toJSON() return data 

Answer 1

The general approach is to call retrieval from your controller, not a view. This avoids handling routing events in your views.

Here is a violin demonstrating the technique.

http://jsfiddle.net/puleos/PHpCz/

Edit: (updated fiddle)

 Mod.metaModel = new metaModel(); Mod.tagsCollection = new tagsCollection(); Mod.compositeView = new CompositeView({ model: Mod.metaModel, collection: Mod.tagsCollection }); var metaPromise = Mod.metaModel.fetch({dataType: "jsonp"}); var tagsPromise = Mod.tagsCollection.fetch({dataType: "jsonp"}); metaPromise.done(function(data) { App.region.show(Mod.compositeView); });