Различные методы рендеринга в шаблоне ручек emberjs

Я читал много на emberjs в последнее время, но мне не совсем ясно: у меня такое ощущение, что есть разные способы создания шаблона. Может кто-то объяснить различия между ними:

{{render}}
{{partial}}
{{template}}
{{outlet}}

Я использую pre4, поэтому, если некоторые из этих ключевых слов устарели, сообщите об этом.

Ответы

Ответ 1

Вы можете найти источник Ember.JS для всех, выполнив поиск: Ember.Handlebars.registerHelper('?'. Например, чтобы найти ту часть, где template определена, выполните поиск: Ember.Handlebars.registerHelper('template'

{{шаблон}}

похож на {{partial}}, но ищет шаблоны, которые вы определяете в хеше Ember.TEMPLATES. Из исходного кода мы можем увидеть пример: Ember.TEMPLATES["my_cool_template"] = Ember.Handlebars.compile('<b>{{user}}</b>');, а затем мы можем сделать его таким образом.

Я слышал шепот, что {{template}} @deprecated, но я не могу найти, где я нашел эту информацию на данный момент. Однако стоит упомянуть, что я никогда не обнаружил, что использую этот. Вместо этого я предпочитаю {{partial}}.

Изменить: Похоже, что это не @deprecated с 3df5ddfd4f. Моя ошибка!

{{частичного}}

Это отличается от подхода {{render}} тем, что controller и view наследуются от контекста, который его вызвал. Например, если вы находитесь в UserRoute, и вы загружаете частичный шаблон пользователя, то теги UserView и UserController будут переданы на частичный, так что они могут получить доступ к той же информации, что и его текущий родитель.

Частичные имена, если они определены, начинаются с символа подчеркивания. Например, часть Profile будет иметь data-template-name of: data-template-name="_profile", но вставляется в ваше представление как {{partial "profile"}}.

{{}} на выходе

Вероятно, вы, наверное, очень много используете. Он преимущественно используется в случаях, когда outlet часто изменяется, основываясь на пользовательских взаимодействиях. Переходя к другой странице (this.transitionTo/{{#linkTo}}), Ember вставляет представление в {{outlet}} и присоединяет соответствующие controller и view.

В качестве примера, если вы переходите в /#/pets, то по умолчанию Ember загрузит PetsView в {{outlet}} и присоединяет PetsController, все это после инициализации PetsRoute для выполнения инструкций перед инициализацией представления и поиска контроллера.

{{оказывают}}

Это смесь из {{outlet}} и a {{partial}}. Он используется для статических страниц, которые не переключаются на другие страницы (как это делает outlet), но он не наследует контроллер и представление (как это делает partial).

Это лучше с примером. Скажем, у вас есть навигация. Обычно у вас будет только одна навигация, и она не изменится для другой, но вы хотите, чтобы навигация имела свой собственный контроллер и представление, а не наследовалась от контекста (возможно, ApplicationRoute). Поэтому, когда вы вставляете навигацию ({{render "navigation"}}), Ember будет прикреплять App.NavigationController и App.NavigationView.

Резюме

  • template: согласовывает глобальный хеш и вставляет представление, когда оно его находит (возможно, скоро будет @deprecated);
  • partial: используется для разделения сложных представлений и наследует контроллер/представление от родителя (если вы находитесь в UserController, то частичное также будет иметь доступ к этому и связанное с ним представление).
  • outlet: наиболее широко используется и позволяет быстро переводить страницы на другие страницы. Соответствующий контроллер/просмотр прикреплен.
  • render: похож на розетку, но используется для страниц, которые сохраняются во всем приложении. Предполагает соответствующий контроллер/представление, а не наследует.

Я хорошо объяснил их?

Просто уточнить:

  • Частичное: Унаследованный контроллер, унаследованный вид, непереключаемый;
  • Выход: Соответствующий контроллер, релевантный вид, переключаемый;
  • Render: релевантный контроллер, соответствующий вид, не может переключаться;

Ответ 2

В руководстве также представлена ​​полезная информация здесь! Ниже приведен краткий обзор:

enter image description here

Ответ 3

Я хотел опубликовать еще один ответ, который действительно помог мне уточнить, когда использовать различные методы template -

Маршрут

Использование маршрута - это когда вам нужен полномасштабный маршрут. "Маршрут" имеет уникальный URL-адрес и состоит из сгенерированных или определенных пользователем классов следующего типа:

  • Маршрут (Ember.Route)
  • Контроллер (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
  • Просмотр (Ember.View)
  • Шаблон шаблона Handlebars

{{оказывают}}

Используйте помощник {{render}}, когда вам нужно представление, но все же необходимо предоставить некоторые функции контроллеру. {{render}} не имеет уникального URL-адреса и состоит из следующих элементов:

  • Контроллер (Ember.Controller || Ember.ArrayController || Ember.ObjectController)
  • Просмотр (Ember.View)
  • Шаблон шаблона Handlebars

{{компонент}}

Используйте помощник {{component}}, когда вы создаете обычно повторно используемый шаблон, который существует независимо от контекста, который он отображает внутри. Пристойный пример может быть, если вы строите розничный веб-сайт и хотите, чтобы агенты обозревателя продукта отображали, где он отображается. {{component}} не имеет уникального URL-адреса, а не controller, но имеет класс component и состоит из следующих элементов:

  • Компонент (Ember.Component)
  • Шаблон шаблона Handlebars

{{частичного}}

Используйте помощник {{partial}}, когда вы просто повторно используете некоторую надбавку. {{partial}} не имеет уникального URL-адреса или какой-либо специальной поддержки, такой как компонент, и состоит из следующего:

  • Шаблон шаблона Handlebars