title: Binding a Backbone Model to a Marionette ItemView - blocking .fetch()?
body: <p>This is a 2 part question. 1) Is there a better way to render a model to a view asynchronously? I'm currently making the ajax request using the <code>fetch</code> method in the model (though I'm calling it explicitly upon initilization), <em>then</em> rendering the templated view using an application event, <code>vent</code>, which gets published from inside the model after the <code>parse</code> method is called. Cool but wonky? 2) Would a blocking <code>fetch</code> method be of use, and is it possible?</p>
  
  <p>The application renders this to the page:</p>
  
  <pre><code>layout
  navbar
  index
  </code></pre>
  
  <p>Then it fetches the model and renders this:</p>
  
  <pre><code>layout
  navbar
  thing
  1
  something
  somethingelse
  </code></pre>
  
  <p>But, if I don't use the <code>vent</code> trigger, it (expectedly) renders:</p>
  
  <pre><code>layout
  navbar
  thing
  1
  null
  null
  </code></pre>
  
  <p>The html templates:</p>
  
  <pre><code>&lt;!-- Region: NavBar --&gt;
  &lt;script type="text/template" id="template-navbar"&gt;
     &lt;div id="navbar"&gt;
        navbar
     &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;!-- View: IndexView --&gt;
  &lt;script type="text/template" id="template-index"&gt;
     &lt;div id="index"&gt;
        index
     &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;!-- View: ThingView --&gt;
  &lt;script type="text/template" id="template-thing"&gt;
     &lt;div id="thing"&gt;
        thing&lt;br/&gt;
        &lt;%= id %&gt;&lt;br/&gt;
        &lt;%= valOne %&gt;&lt;br/&gt;
        &lt;%= valTwo %&gt;&lt;br/&gt;
     &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;!-- Region --&gt;
  &lt;div id="default-region"&gt;
    &lt;!-- Layout --&gt;
    &lt;script type="text/template" id="template-default"&gt;
       layout
       &lt;div id="region-navbar"&gt;
       &lt;/div&gt;
       &lt;div id="region-content"&gt;
       &lt;/div&gt;
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.js</strong>:</p>
  
  <pre><code>window.App = { }
  
  # Region
  class RegionContainer extends Backbone.Marionette.Region
    el: '#default-region'   
    # Called on the region when the view has been rendered
    onShow: (view) -&gt;
      console.log 'onShow RegionContainer'
  
  App.RegionContainer = RegionContainer
  
  # Layout
  class DefaultLayout extends Backbone.Marionette.Layout
    template: '#template-default'  
    regions:
      navbarRegion: '#region-navbar'
      contentRegion: '#region-content'
    onShow: (view) -&gt;
      console.log 'onShow DefaultLayout'
  
  App.DefaultLayout = DefaultLayout
  
  # NavBar (View)
  class NavBar extends Backbone.Marionette.ItemView
    template: '#template-navbar'    
    initialize: () -&gt;
      console.log 'init App.NavBar'
  
  App.NavBar = NavBar
  
  # Index View
  class IndexView extends Backbone.Marionette.ItemView
    template: '#template-index'  
    initialize: () -&gt;
      console.log 'init App.IndexView'
  
  App.IndexView = IndexView
  
  # Thing View
  class ThingView extends Backbone.Marionette.ItemView
    template: '#template-thing'  
    model: null
    initialize: () -&gt;
      console.log 'init App.ThingView'
    events:
      'click .test_button button': 'doSomething'
    doSomething: () -&gt;
      console.log 'ItemView event -&gt; doSomething()'
  
  App.ThingView = ThingView
  
  # Thing Model
  class Thing extends Backbone.Model
    defaults:
      id: null
      valOne: null
      valTwo: null
    url: () -&gt;
      '/thing/' + @attributes.id
    initialize: (item) -&gt;
      console.log 'init App.Thing'
      @fetch()
    parse: (resp, xhr) -&gt;
      console.log 'parse response: ' + JSON.stringify resp 
      # resp: {"id":"1","valOne":"something","valTwo":"somethingelse"}
      @attributes.id = resp.id
      @attributes.valOne = resp.valOne
      @attributes.valTwo = resp.valTwo
      console.log 'Thing: ' + JSON.stringify @
      @
      App.MyApp.vent.trigger 'thingisdone' 
  
  App.Thing = Thing
  
  # App
  $ -&gt;
  
    # Create application, allow for global access
    MyApp = new Backbone.Marionette.Application()
    App.MyApp = MyApp
  
    # RegionContainer
    regionContainer = new App.RegionContainer
  
    # DefaultLayout
    defaultLayout = new App.DefaultLayout
    regionContainer.show defaultLayout
  
    # Views
    navBarView = new App.NavBar
    indexView = new App.IndexView
  
    # Show defaults
    defaultLayout.navbarRegion.show navBarView
    defaultLayout.contentRegion.show indexView
  
     # Allow for global access
    App.defaultRegion = regionContainer
    App.defaultLayout = defaultLayout
  
    # Set default data for MyQpp (can't be empty?)
    data = 
      that: 'this'
  
    # On application init...
    App.MyApp.addInitializer (data) -&gt;
      console.log 'init App.MyApp'
  
      # Test
      App.modelViewTrigger = -&gt;
        console.log 'trigger ajax request via model, render view'
        App.MyApp.vent.trigger 'show:thing' 
  
      App.timeoutInit = -&gt;
        console.log 'init timeout'
        setTimeout 'App.modelViewTrigger()', 2000
  
      App.timeoutInit()
  
      # Event pub/sub handling
      App.MyApp.vent.on 'show:thing', -&gt;
        console.log 'received message -&gt; show:thing'
        thing = new App.Thing(id: '1')
        App.thingView = new App.ThingView(model: thing)
        # I should be able to do this, but it renders null
        # App.defaultLayout.contentRegion.show App.thingView
  
      # Testing to see if I could pub from inside model..yes!
      App.MyApp.vent.on 'thingisdone', -&gt;
        console.log 'received message -&gt; thingisdone'
        App.defaultLayout.contentRegion.show App.thingView
  
    MyApp.start data
  </code></pre>