Frank LoVecchio Frank LoVecchio - 4 years ago 255
Javascript Question

Binding a Backbone Model to a Marionette ItemView - blocking .fetch()?

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

method in the model (though I'm calling it explicitly upon initilization), then rendering the templated view using an application event,
, which gets published from inside the model after the
method is called. Cool but wonky? 2) Would a blocking
method be of use, and is it possible?

The application renders this to the page:


Then it fetches the model and renders this:


But, if I don't use the
trigger, it (expectedly) renders:


The html templates:

<!-- Region: NavBar -->
<script type="text/template" id="template-navbar">
<div id="navbar">

<!-- View: IndexView -->
<script type="text/template" id="template-index">
<div id="index">

<!-- View: ThingView -->
<script type="text/template" id="template-thing">
<div id="thing">
<%= id %><br/>
<%= valOne %><br/>
<%= valTwo %><br/>

<!-- Region -->
<div id="default-region">
<!-- Layout -->
<script type="text/template" id="template-default">
<div id="region-navbar">
<div id="region-content">


window.App = { }

# Region
class RegionContainer extends Backbone.Marionette.Region
el: '#default-region'
# Called on the region when the view has been rendered
onShow: (view) ->
console.log 'onShow RegionContainer'

App.RegionContainer = RegionContainer

# Layout
class DefaultLayout extends Backbone.Marionette.Layout
template: '#template-default'
navbarRegion: '#region-navbar'
contentRegion: '#region-content'
onShow: (view) ->
console.log 'onShow DefaultLayout'

App.DefaultLayout = DefaultLayout

# NavBar (View)
class NavBar extends Backbone.Marionette.ItemView
template: '#template-navbar'
initialize: () ->
console.log 'init App.NavBar'

App.NavBar = NavBar

# Index View
class IndexView extends Backbone.Marionette.ItemView
template: '#template-index'
initialize: () ->
console.log 'init App.IndexView'

App.IndexView = IndexView

# Thing View
class ThingView extends Backbone.Marionette.ItemView
template: '#template-thing'
model: null
initialize: () ->
console.log 'init App.ThingView'
'click .test_button button': 'doSomething'
doSomething: () ->
console.log 'ItemView event -> doSomething()'

App.ThingView = ThingView

# Thing Model
class Thing extends Backbone.Model
id: null
valOne: null
valTwo: null
url: () ->
'/thing/' +
initialize: (item) ->
console.log 'init App.Thing'
parse: (resp, xhr) ->
console.log 'parse response: ' + JSON.stringify resp
# resp: {"id":"1","valOne":"something","valTwo":"somethingelse"} =
@attributes.valOne = resp.valOne
@attributes.valTwo = resp.valTwo
console.log 'Thing: ' + JSON.stringify @
App.MyApp.vent.trigger 'thingisdone'

App.Thing = Thing

# App
$ ->

# Create application, allow for global access
MyApp = new Backbone.Marionette.Application()
App.MyApp = MyApp

# RegionContainer
regionContainer = new App.RegionContainer

# DefaultLayout
defaultLayout = new App.DefaultLayout defaultLayout

# Views
navBarView = new App.NavBar
indexView = new App.IndexView

# Show defaults navBarView 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) ->
console.log 'init App.MyApp'

# Test
App.modelViewTrigger = ->
console.log 'trigger ajax request via model, render view'
App.MyApp.vent.trigger 'show:thing'

App.timeoutInit = ->
console.log 'init timeout'
setTimeout 'App.modelViewTrigger()', 2000


# Event pub/sub handling
App.MyApp.vent.on 'show:thing', ->
console.log 'received message -> 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.thingView

# Testing to see if I could pub from inside model..yes!
App.MyApp.vent.on 'thingisdone', ->
console.log 'received message -> thingisdone' App.thingView

MyApp.start data

Answer Source

From a very basic standpoint, throwing aside the specific example that you've provided, here is how I would approach the problem and solution.

A Generic Problem / Solution

Here's a generic version of the problem:

  • You need to fetch a model by its id.
  • You need a view to render after the model has been fetched.

This is fairly simple. Attach the model to the view before fetching the data, then use the "sync" event of the model to render the view:

MyView = Backbone.View.extend({
  initialize: function(){
    this.model.on("sync", this.render, this);

  render: function(){ ... }

myModel = new MyModel({id: someId});
new MyView({
  model: myModel


Things to note:

I'm setting up the model with its id, and the view with the model before calling fetch on the model. This is needed in order to prevent a race condition between loading the data and rendering the view.

I've specified generic Backbone stuff here. Marionette will generally work the same, but do the rendering for you.

Your Specific Needs

Blocking Fetch

Bad idea, all around. Don't try it.

A blocking fetch will make your application completely unresponsive until the data has returned from the server. This will manifest itself as an application that performs poorly and freezes any time the user tries to do anything.

The key to not doing this is taking advantage of events and ensuring that your events are configured before you actually make the asynchronous call, as shown in my generic example.

And don't call the fetch from within the model's initializer. That's asking for trouble as you won't be able to set up any views or events before the fetch happens. I'm pretty sure this will solve the majority of the problems you're having with the asynchronous call.

Events Between View And Model

First, I would avoid using MyApp.vent to communicate between the model and the view instance. The view already has a reference to the model, so they should communicate directly with each other.

In other words, the model should directly trigger the event and the view should listen to the event on the model. This works in the same way as my simple example, but you can have your model trigger any event you want at any time.

I would also be sure to the use bindTo feature of Marionette's views, to assist in cleaning up the events when the view is closed.

MyView = Backbone.Marionette.ItemView.extend({
  initialize: function(){
    this.bindTo(this.model, "do:something", this.render, this);

MyModel = Backbone.Model.extend({
  doSomething: function(){

myModel = new MyModel();
new MyView({
  model: myModel


Other Items

There are some other items that I think are causing some problems, or leading toward odd situations that will cause problems.

For example, you have too much happening in the DOMReady event: $ ->

It's not that you have too much code being executed from this event, but you have too much code defined within this event. You should not have to do anything more than this:

$ -> 

Don't define your Marionette.Application object in this event callback, either. This should be defined on its own, so that you can set up your initializers outside of the DOMReady callback, and then trigger them with the app.start() call.

Take a look at the BBCloneMail sample application for an example on rendering a layout and then populating its regions after loading data and external templates:


live app:

I don't think I'm directly answering your questions the way you might want, but the ideas that I'm presenting should lead you to the answer that you need. I hope it helps at least. :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download