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

视图中的“模型”参数没有什么神奇之处，除了作为一种约定，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对“模型”的作用就是：

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

默认情况下，对于具有以下名称的任何选项，它都会执行此操作：

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

Answer 2

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

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

2 个答案: