Two models in backbone View

Question

I have been trying to display two models in one view. Here is my code:

On router part- fetch models of about us and company and add them to AboutusView:

var self=this;
var aboutus=new Aboutus({id:1});
var company= new Company({id:1});
aboutus.fetch();
company.fetch();


var model = new Backbone.Model();
model.set({aboutus: aboutus, company: company});
var aboutusView=new AboutusView({model:aboutus,model2:company});
aboutusView.render();
self.changePage(aboutusView);


=======================

For Aboutus View Part:


var AboutusView = Backbone.View.extend({

template: _.template(aboutusViewTemplate),

initialize: function () {
    _.bindAll(this, 'render');

},


render: function(){

console.log(this.model);
console.log(this.options.model2);


this.$el.html(this.template(this.model.toJSON()));

  return this;
}
});

return AboutusView;




============================
In console log of this.model (aboutus) is:
===========================
 child {attributes: Object, _escapedAttributes: Object, cid: "c0", changed: Object,     _silent: Object…}
 _changing: false
 _escapedAttributes: Object
 _pending: Object
 _previousAttributes: Object
 _silent: Object
  attributes: Object
     aboutusId: 1
     description: "testing" 
      id: 1
       imageExtension: ""
       title: "ABOUT US"
 __proto__: Object
 changed: Object
  cid: "c0"
  id: 1
 __proto__: ctor

So the question is I want to display aboutus attributes such as aboutusId, description in template. How can i do that?

@eguneys aboutusViewTemplate is just html template to show data. — JaRoi, Jan 23 '14 at 02:14

score 1 · Answer 1 · answered Jan 22 '14 at 14:26

1

Instead of sending this.model.toJSON() to your template, send both datasets (models). Keep in mind that you can send any type of JSON object to a template. You could do something like:

var somedata = {
    aboutus: this.model.toJSON(),
    company: this.options.model2.toJSON() //or 'this.model2.toJSON()', not completely sure where this model is accessible in the view.
    }

this.$el.html(this.template(somedata));

Then in your template you can access each model by <%= aboutus.description %> or <%=company.id %> (for example).

answered Jan 22 '14 at 14:26

Kyle R

716
1
5
15

Actually this.model is not model it is returning child (as show in above) Any idea on how to retrieve the attributes inside the child – JaRoi Jan 23 '14 at 02:21
Oh, I see. I added a new answer below. Hopefully that helps. – Kyle R Jan 23 '14 at 14:25

score 0 · Answer 2 · answered Jan 23 '14 at 14:25

var model = new Backbone.Model();
model.set({aboutus: aboutus, company: company});
var aboutusView=new AboutusView({model:aboutus,model2:company});

In these lines above, you create the var model but never add attach model to the AboutusView. Wouldn't you want to do:

var aboutusView=new AboutusView({model:model});

In doing so, you have now a model, called model that has attributes aboutus and company, which you can access in your template by passing model.toJSON() in your template.

If Aboutus and Company are also models (I assume they are), you can access their attributes in your view by:

this.model.get('aboutus').get('id')

Two models in backbone View

2 Answers2