在单个Backbone视图和EJS模板中使用多个模型的问题

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

There's nothing magical about the argument "model" in views, other then as a sort of convention, Backbone copies that into a "model" property in your view.[1]

You can pass in as many things as you want to a view - you just need to do something with them in the initialize function.

I would go with a riff on your 2nd choice:

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

in your view's initialize function

initialize: function(options) {
    this.image = options.image;
    this.person = options.person;
}

I'm not familiar with using EJS templates with Backbone, but usually, if you want a property of a model, you need to .get() it like model.get('propertyName')

So, in the above case, you would instead do image.get('someImageProperty') and person.get('somePersonProperty')

In your view, there will be no "model" property, as you didn't pass in any argument named "model".

If you wanted to go with your first choice, then you need to refer to the "sub-objects" via model.get('image').get('someImageProperty')

[1] What Backbone does by default with "model" is simply this:

initialize: function(options) {
    this.model = options.model;
}

It does this, by default, for any options with these names:

'model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName'

Answer 2

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 %>