Вложенные маршруты в Ember JS и Ember Rails

Question

Может кто-нибудь объяснить в терминах непрофессионала, как вложенные розетки работают в шаблонах ember?

В частности, пытаясь понять это из документации: http://emberjs.com/guides/routing/rendering-a-template/

«Материнской маршрут не делает в основную розетку ...»

Это означает, что текущий маршрут пытался оказать в родительский шаблон , но родительский маршрут не отобразил шаблон или , если это так, что шаблон, который предоставил родительский маршрут, не сделал в основной шаблон (то есть, по умолчанию {{outlet} }).

Более конкретно, я пытаюсь понять, как создать иерархию вложенных представлений в моем приложении. Это три слоя глубоких коллекций. Я хочу создать серию складных вложенных представлений на основе содержимого коллекций. Структура данных может быть подобна дереву.

Библиотеки -> каждая библиотека имеет много книг -> каждая книга имеет много страниц

Looking для иллюстративного jsbin или образца кода, демонстрирующие вложенную структуру шаблона на практике.

Представьте маршрутизатор, который выглядит следующим образом:

App.Router.map(function() { 

    this.resource('libraries', function() { 
     this.route('new'); 

     this.resource('library', {path: ':library_id'}, function() { 

      this.resource('books', function() { 
       this.route('new'); 
       this.resource('book', {path: ':book_id'}, function() { 

        this.resource('pages', function() { 
         this.route('new'); 
         this.resource('page', {path: ':page_id'}, function() { 

         }); // Page 
        }); // Pages 

       }); // Book 
      }); // Books 

     }); // Library 
    }); // Libraries 

}); // map 

Answer 1

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

Было несколько итераций этого в Ember, в настоящее время эта функциональность предоставляется помощником {{outlet}}. Розетки - путь Эмбера к yield в макет.

Площадь, в которой outlet значительно отличается от yield, является гнездом. Упрощение на стороне сервера намного проще. Вам нужно только пометить области шаблона, чтобы уступить, а затем вызвать, чтобы получить блок контента в указанную цель.

Однако, когда рендеринг содержимого переключается на javascript на стороне клиента, только части страницы обновляются по требованию. Вы уже не можете просто yield непосредственно в маркеры. Вам нужно умнее yield, то есть: - outlet.

Есть 2 стороны до {{outlet}}.

1. Маркер, который указывает, где вы хотите уступить. Это вспомогательный помощник {{outlet}}.
2. Код, который отображает шаблон в этой розетке. Это метод render, используемый внутри крюка renderTemplate.

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

{{outlet 'sidebar'}} 
{{outlet 'nav'}} 

Это объявляет 2 выхода под названием «sidebar» и «nav». Теперь вы можете отображать другие шаблоны в этих торговых точках.

По умолчанию выходы используются при рендеринге без явного имени розетки. Для названных выходов рендеринг выполняется путем вызова render в крючке renderTemplateRoute. Вы делаете это, указав опцию outlet в хеше, переданном методу render в качестве параметров.

renderTemplate() { 
    this.render('recentPosts', { outlet: 'sidebar' }); 
} 

Здесь шаблон recentPosts воздастся в розетку с именем «Боковая панель» внутри своего родительского шаблона.

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

Когда вы объявляете resource с this.resource('posts'); в Router, вы указываете несколько вещей, основанных на согласии.

1. Отрендерьте posts маршрут с шаблоном макета posts.
2. При желании визуализируйте неявный маршрут posts.index с помощью шаблона posts/index.

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

Без этого {{outlet}} пути ребенка не будут иметь непосредственную родительскую розетку для визуализации. Затем они будут отображаться родителем этого родителя или, в конечном счете, с выходом application. Когда это произойдет, вы увидите предупреждение "The immediate parent route did not render into the main outlet ...". Проверьте местоположение вашего outlets, когда это произойдет.

posts.index - неявный маршрут, предоставляемый всем ресурсам, которые имеют вложенные маршруты. Другими словами, если ваш ресурс имеет вложенные маршруты, вам не нужно явно объявлять вложенный, this.route('index).

Этот маршрут index может отображать содержимое этого ресурса. Например, для posts.index, вы можете отобразить список всех posts. Одно второстепенное требование с этим неявным маршрутом состоит в том, что модель находится на родительском маршруте posts. Вы должны использовать needs api, чтобы получить эту модель в PostsIndexController.

needs: ['posts'], 
contentBinding: 'controller.posts' 

Кроме того, этот posts.index маршрут является необязательным. Вы можете поместить пользовательский интерфейс от posts/index, используемый для отображения списка сообщений, непосредственно в сам шаблон posts. Однако это означает, что любой дочерний ресурс также будет отображаться со списком сообщений, рядом с выходом в posts. Решение о том, следует ли использовать явный маршрут указателя или нет, зависит от пользовательского интерфейса, который должен отображаться.

Сидящий прежде всего другие шаблоны - это шаблон application.Он должен иметь outlet для вложенных ресурсов для визуализации, и обычно будет располагаться макет, общий для страницы. Если вы не укажете шаблон приложения, будет использоваться шаблон по умолчанию. Этот сгенерированный шаблон эквивалентен {{outlet}}, то есть: - шаблон, имеющий только стандартную розетку.

Рассмотрите следующие маршруты.

App.Router.map(function() { 
    this.resource('posts', function() { 
     this.route('new') 
     this.resource('post', {path: ':post_id'}, function() { 
     this.resource('comments', function() { 
      this.route('new'); 
     }); 
     }); 
    }); 
}); 

Здесь posts.new будет оказана в posts выдаваемого в posts, выдаваемого в розетку в application шаблона по умолчанию. Остальные используемые шаблоны перечислены ниже.

+---------------------------+--------------------------------------------------------+ 
| Route      | Templates used (default outlets)      | 
+---------------------------+--------------------------------------------------------+ 
| posts.index    | posts.index > posts > application      | 
+---------------------------+--------------------------------------------------------+ 
| posts.new     | posts.new > posts > application      | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.index   | post.index > post > posts > application    | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.new   | post.new > post > posts > application     | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.comments.index | comments.index > comments > post > posts > application | 
+---------------------------+--------------------------------------------------------+ 
| posts.post.comments.new | comments.new > comments > post > posts > application | 
+---------------------------+--------------------------------------------------------+ 

Эта иерархия шаблона по умолчанию можно изменить, указав into опции методы render.

renderTemplate: function() { 
    this.render('posts', { into: 'sidebar' }) 
} 

Здесь posts шаблон будет оказывать на выходе по умолчанию для sidebar шаблона.

Это примерно. Outlet - еще одна концепция ember, которая использует множество соглашений по конфигурации. Настройки по умолчанию неплохие, в то же время легко настраиваемые.