Question

I’m trying to utilize two models in a single view and thus template but after attempting the examples shown in this question: Backbone.js: complex views combining multiple models I am running into some errors.

First if I try to use a view model to combine both models as below:

var model = new Backbone.Model();
model.set({ image: image, person: person });
var view = new Project.Views.Images.ShowView({ model: model });

I am unable to access anything in the template, each field is either empty or some are the string representation of a function. Here’s my template:

<img width="<%= image.width %>" height="<%= image.height %>" alt="<%= image.message %>" src="<%= image.url %>" />
<p><%= image.message %></p>
<h4>by <%= person.name %></h4>

Here’s the output that template produces:

<img width="" height="" alt="" src="function () {
  var base = getUrl(this.collection) || this.urlRoot || urlError();
  if (this.isNew()) return base;
  return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + encodeURIComponent(this.id);
}">
<p></p>
<h4>by </h4>

I have verified that both image and chaser are valid models and if I pass in only one of them to the view it works fine and binds that model to that view.

I have also tried the other approach:

var view = new Project.Views.Images.ShowView({ model: image, person: person });

With the template then looking like this:

<img width="<%= width %>" height="<%= height %>" alt="<%= message %>" src="<%= url %>" />
<p><%= message %></p>
<h4>by <%= person.name %></h4>

However this throws a javascript error saying person is undefined and if I remove person.name from the template the rest displays properly.

What am I doing wrong and are these even the right approaches to take?

Answer 1

The EJS was wrong, when combining models into a single view model I had to use the following template (note the ‘attributes’ object):

<img width="<%= image.attributes.width %>" height="<%= image.attributes.height %>" alt="<%= image.attributes.message %>" src="<%= image.attributes.url %>" />
<p><%= image.attributes.message %></p>
<h4>by <%= person.attributes.name %></h4>

I haven’t looked into it deeper so I’m not sure why the JSON serialization is different with a single model but it is. When I just pass image in as the model I can omit the attributes object as so:

<%= width %>