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

Question

我试图在单个视图中使用两个模型,因此模板但在尝试此问题中显示的示例后:Backbone.js:组合多个模型的复杂视图我遇到了一些错误.

首先,如果我尝试使用视图模型将两个模型组合如下:

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

我无法访问模板中的任何内容,每个字段都是空的,或者某些字段是函数的字符串表示形式.这是我的模板:

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

这是模板生成的输出:

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

我已经验证了图像和追踪器都是有效的模型,如果我只将其中一个传递给视图,它可以正常工作并将该模型绑定到该视图.

我也尝试了另一种方法:

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

使用模板然后看起来像这样:

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

然而,这会抛出一个javascript错误,说人是未定义的,如果我从模板中删除person.name,其余的显示正确.

我做错了什么,这些甚至是正确的方法吗？

Answer 1

关于视图中的"模型"参数并没有什么神奇之处,除了作为一种约定,Backbone将其复制到视图中的"模型"属性中.[1]

您可以将任意数量的内容传递给视图 - 您只需要在initialize函数中对它们执行某些操作.

我会选择你的第二选择:

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

在视图的初始化函数中

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

我不熟悉使用Backbone的EJS模板,但通常,如果你想要一个模型的属性,你需要.get()它像model.get('propertyName')

所以,在上面的例子中,你会改为做image.get('someImageProperty')和person.get('somePersonProperty')

在您看来,没有"model"属性,因为您没有传递任何名为"model"的参数.

如果你想选择第一个选择,那么你需要通过"子对象"来参考 model.get('image').get('someImageProperty')

[1] Backbone默认使用"model"做什么就是这样:

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

默认情况下,对于具有以下名称的任何选项,它都会这样做:

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