Second Model inside a View using Backbone


Trying to build a mobile app for a client I needed to add a second model inside a single view, apparently it doesn’t work out of the box.

After googling for a while, without success, I decided to go to the IRC and ask in there. As I expected I got the answer right away.

When you try to initialize a view inside a route like this:

// routes.js
var Router = Backbone.Router.extend({
  routes: {
    'app': 'home'
  },

  initialize: function() {
    console.log("Route initialized");
  },

  home: function() {
    new HomeView({ 
      model: userModel, 
      client: clientModel 
    });
  }
});

var route = new Router();

And try to access it like this:

// views.js
var HomeView = Backbone.View.extend({
  el: '.app',

  template: App.Templates.home,

  events: {},

  initialize: function() {
    this.render();
    console.log(this.client); // Trying to access `clientModel`
  },

  render: function() {
    this.$el.html(this.template);
  }
});

It won’t work.

Solution

You will need to get the second model from the parameters passed in the initialize function when you create the view:

var HomeView = Backbone.View.extend({
  el: '.app',

  template: App.Templates.home,

  events: {},

  // `params` argument let us access the parameters 
  // passed on this function
  initialize: function(params) { 
    this.render();
    this.client = params.clientModel;
    console.log(this.client); // now we can access it
  },

  render: function() {
    this.$el.html(this.template);
  }
});

Thanks to systemfault on ##frontend for help me figure it out.