Проблемы с использованием нескольких моделей в одном представлении Backbone и шаблоне EJS - PullRequest
Новая
       24

Проблемы с использованием нескольких моделей в одном представлении Backbone и шаблоне EJS

0 голосов
/ 04 марта 2012

Я пытаюсь использовать две модели в одном представлении и, следовательно, в шаблоне, но после попытки примеров, показанных в этом вопросе: 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 из шаблона, все остальное будет отображаться правильно.

Что я делаю не так, и подходят ли эти подходы?

Ответы [ 2 ]

6 голосов
/ 04 марта 2012

Нет ничего волшебного в аргументе "модель" в представлениях, кроме как своего рода соглашение, 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;
}

Я не знаком с использованием шаблонов EJS с Backbone, но обычно, если вам нужно свойство модели, вам нужно .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'

0 голосов
/ 04 марта 2012

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