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

Question

我试图在一个视图中使用两个模型并因此使用模板，但是在尝试了这个问题中显示的示例之后：Backbone.js: complex views combining multiple models 我遇到了一些错误。

首先，如果我尝试使用视图模型来组合两个模型，如下所示：

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

EJS 是错误的，当将模型组合成单个视图模型时，我必须使用以下模板（注意“属性”对象）：

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

我没有深入研究它，所以我不确定为什么 JSON 序列化与单个模型不同，但确实如此。当我只是将图像作为模型传入时，我可以省略属性对象：

<%= width %>

Answer 2

视图中的参数“模型”没有什么神奇之处，除了作为一种约定，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.get('image').get('someImageProperty')引用“子对象”

[1] Backbone 对“模型”的默认作用是这样的：

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

默认情况下，它会为具有这些名称的任何选项执行此操作：

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