Как отобразить несколько шаблонов для маршрута в Router v2

мой индексный шаблон имеет два выхода: один для заголовка, другой для контента. шаблон, отображаемый в содержимом, изменяется в зависимости от просматриваемого содержимого.

В старом маршрутизаторе это можно сделать, вызвав connectOutlet на разных контроллерах, которым принадлежит этот шаблон. Я не могу понять, как сделать то же самое в новом маршрутизаторе.

любые предложения?

Ответ 1

Своими исследованиями я пришел к следующему: Скажем, у вас есть такой маршрутизатор, как:

App.Router.map(function(match) {
  match('/').to('index');
});

ApplicationTemplate:

<script type="text/x-handlebars">
{{outlet header}}
{{outlet}}
</script>

IndexTemplate:

<script type="text/x-handlebars" data-template-name="index">
{{outlet dashboard}}
{{outlet spaces}}
</script>

Теперь, что мы хотим, так это то, что когда пользователь переходит на индексный маршрутизатор, страница должна:

Отметьте индекс в основной розетке и заголовке в заголовке заголовка шаблона приложения.
отобразить панель инструментов, шаблон пробелов в шаблон индекса.

Для этого напишем следующий код в indexRoute

App.IndexRoute = Em.Route.extend({
    renderTemplate: function(controller, model){
        //Render header into header outlet
        this.render('header',{
            outlet:'header'
        });
        //Render index into main outlet. If you comment out 
        //this line, the code below fails
        this.render('index');

        //by using into, we can render into the index template
        //Note: The controller is optional.if not specified,
        //ember picks up controller for the given template.
        this.render('dashboard',{
            outlet:'dashboard',
            into:'index',
            controller:this.controllerFor('somethingElse', App.TestModel.find())
        });
        //controller is SpacesController
        this.render('spaces',{
            outlet:'spaces',
            into:'index'
        });
    }
});

Ответ 2

вы можете использовать функцию renderTemplates в маршрутизаторе для визуализации представлений mulitple для обозначения торговых точек:

renderTemplates:function () {
   this.render('todos_list', {
       into:'todos', //template name
       outlet: 'todos', //named outlet
       controller: 'listController' //controller you want to use
   });
   this.render('todos_test', {
       into:'todos',
       outlet: 'test',
       controller: 'testController'
   });
},

setupControllers:function (controller, model) {
   this.controllerFor('list').set('content', listmodel.find());
   this.controllerFor('test').set('content', testmodel.find());
}

Функция setupControllerControllerFor позволит вам назначить то, что мы установили как "контекст" в предыдущем маршрутизаторе.

В шаблоне вы бы назвали торговые точки так же, как и раньше:

{{outlet list}}
{{outlet test}}

Надеюсь, что это поможет:)