Ember.js + handlebars: render vs outlet vs partial vs view vs control

Ответ 1

Все они являются помощниками шаблонов со следующими основными характеристиками, как описано в руководствах emberjs. (http://emberjs.com/guides/templates/rendering-with-helpers/)

1. {{outlet}} - отображает шаблон на основе маршрута, определенного маршрутизатором. На основе маршрута используется соответствующий контроллер и представление. Это полезно при рендеринге содержимого на основе маршрута, который является наиболее распространенным случаем.

2. {{outlet NAME}} - Предоставляет возможность указывать на маршруте, где именно для отображения содержимого. Полезно при попытке отобразить содержимое из нескольких шаблонов для маршрута.

3. {{render}} - Подобно outlet, но контроллер/представление/модель могут быть указаны прямо или косвенно из помощника. Полезно, когда требуется, чтобы отображать контент из более чем одного шаблона с возможностью переопределения контекста (view/controller) и модели. Если задана модель, он использует уникальный экземпляр соответствующего контроллера, иначе он будет использовать экземпляр singleton. Полезно, когда требуется переопределить контекст и модель маршрута, при рендеринге содержимого нескольких шаблонов.

4. {{control}} - работает как render, за исключением того, что использует новый экземпляр контроллера для каждого вызова вместо повторного использования одноэлементного контроллера. При использовании render невозможно использовать несколько рендерингов для одного и того же маршрута без указания модели, в этом случае следует использовать control. Полезно поддерживать новые экземпляры контроллера для каждого отображаемого содержимого шаблона.

Обновление: Хелдер управления удален https://github.com/emberjs/ember.js/commit/86eecd7ef7cdc7d2ea6f77b3a726b293292ec55d.

5. {{partial}} - принимает шаблон в качестве аргумента и отображает этот шаблон. Это не изменяет контекст или область действия. Он просто переносит данный шаблон на место с текущей областью. Таким образом, для частичного класса не указан класс. Полезно, когда требуется разбить шаблон на шаблонные модули, для лучшего контроля или повторного использования, без создания классов классов.

6. {{view}} - Это работает как частичный, но предоставляется класс представления. Класс view указывает шаблон, который будет использоваться. Полезно при разбиении шаблона на модули, но для этого требуется класс вида, например. для обработки событий.

7. {{#view}} - Существует также блочная форма помощника вида, которая позволяет указать шаблон дочернего представления inline с шаблоном родительского представления. (http://emberjs.com/guides/views/inserting-views-in-templates/)

Ответ 2

{{outlet}} определяет, где вложенные ресурсы/маршруты будут отображаться внутри шаблона маршрута

{{outlet NAME}} это создает именованную розетку, где вы можете программно отобразить что-то в

App.PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the route to render into
      outlet: 'posts',              // the name of the outlet in the route template
      controller: 'blogPost'        // the controller to use for the template
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',    
      controller: 'blogPost'
    });
  }
});

{{render}} принимает два параметра:

Первый параметр описывает настраиваемый контекст Дополнительным вторым параметром является модель, которая будет передана контроллеру, если предоставлена ​​

{{render}} выполняет несколько действий:

Если модель не предоставляется, она получает экземпляр singleton соответствующего контроллера Когда модель предоставляется, она получает уникальный экземпляр соответствующего контроллера Отображает именованный шаблон с помощью этого контроллера Устанавливает модель соответствующего контроллера

{{partial}} возвращает шаблон в качестве аргумента и отображает этот шаблон (используя текущую область как контекст).

{{view}} Этот помощник работает как частичный помощник, за исключением того, что вместо предоставления шаблона, который будет отображаться в текущем шаблоне, вы предоставляете класс представления. Вид управляет визуализацией шаблона.

{{control}} устаревший работает как render, за исключением того, что использует новый экземпляр контроллера для каждого вызова вместо повторного использования одноэлементного контроллера.

Большая часть этого я просто скопировал и вставил из своей документации: http://emberjs.com/guides/templates/rendering-with-helpers/

Ответ 3

• render хелпер устарел в v2.x, вместо этого вам нужно использовать ember-elsewhere addon. https://emberjs.com/deprecations/v2.x/#toc_rendering-into-a-render-helper-that-resolves-to-an-outlet
• ember.view устарел в v1.x вместо Component. refer https://emberjs.com/deprecations/v1.x/#toc_ember-view
• control помощник только экспериментальный, его уже удаленный

Я бы сказал, что в настоящее время только {{outlet}} рекомендуется, чтобы оставшиеся все были устаревшими/удаленными.

Ответ 4

Основные отличия

{{view}} отображает предоставленный класс представления, который должен быть доступен

{{partial}} отображает шаблон в Ember.TEMPLATES. его может не иметь отношения к классу вида. Преимущество - это контекст остатков шаблона родительского представления.

{{outlet}} Укажите маршрутизатор, который здесь должен отображать предоставленный вид или шаблон или в соответствии с крюком renderTemplate().

{{outlet NAME}} полезно, когда вы хотите отображать два вида/шаблонов в разных положениях. Вы можете назвать выходы и попросить маршрутизатор визуализировать.

{{render}} то же самое, что и выход, за исключением того, что вы вынуждаете маршрутизатор отображать определенный вид/шаблон.