{{outlet}}, {{view}}, {{render}} и {{control}}

Я пытаюсь собрать простое приложение Ember. Дерево каталогов на одной стороне и список файлов на другом.

Ember предлагает несколько помощников для отображения контекста в виде. Какие из них я могу использовать для:

  • Поддеревья дерева каталогов.
  • Список сведений.

На самом деле было бы очень полезно, если кто-то может указать мне на любые документы, которые я могу прочитать о различиях между {{render view}}, {{view view}} и {{control view}} помощниками и как их правильно использовать.

Спасибо большое!

Ответы

Ответ 1

{{view "directory"}} отображает представление в контексте текущего контроллера.

{{render "directory"}} отображает представление App.DirectoryView с шаблоном directory в контексте singleton App.DirectoryController

{{control directory}} ведет себя так же, как render, только каждый раз он создает новый экземпляр App.DirectoryController (в отличие от render, который использует один и тот же экземпляр контроллера каждый раз).

Обновление 18 февраля 2014: {{control}} удален.

Последние два помощника относительно новы, поэтому документации о них мало. Вы можете найти {{view}} документацию здесь.

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

App.Router.map(function(){
  this.resource('directories', function() {
     this.resource('directory', { path: '/:directory_id'}, function() {
       this.route('files');
     });
  });
});

Вы можете использовать следующее это руководство.

UPDATE: {{render}} теперь создает новый экземпляр каждый раз, если вы передаете модель.

Ответ 2

Для очень хорошего хорошего объяснения помощников render, partial, outlet и template посмотрите question.

Как примерный пример, как можно использовать эти помощники:

{{render "navigation}}} → Отображает NavigationController и NavigationView в этом месте. Этот помощник хорош для мест, где контроллер и представление не изменяются, например. навигации.

{{outlet "detailsOutlet" }} → Это обеспечит точку заглушки/крюка/точки, в которую вы можете отображать компоненты (Controller + View). Можно было бы использовать это с метод визуализации маршрутов. В вашем случае у вас, скорее всего, будет подробный маршрут, который может выглядеть так. Это приведет к тому, что DetailController с DetailsView войдет в "detailOutlet" выходного шаблона индекса.

App.DetailsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('details', {   // the template/view to render -> results in App.DetailsView
      into: 'index',          // the template to render into -> where the outlet is defined
      outlet: 'detailsOutlet',       // the name of the outlet in that template -> see above
    });
  }
});

{{просмотреть App.DetailsView}} → Это отобразит данное представление, сохранив текущий контекст/контроллер. Можно изменить контекст, например. используя ваш основной объект и передайте его данные в виде следующего вида:

{{просмотреть App.DetailsView contextBinding = "masterEntity.details" }}

Этот помощник полезен, если вы хотите инкапсулировать определенные части компонента в subviews, которые имеют собственную пользовательскую логику, например, обработку действий/событий.

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