Ember маршруты + розетки

Question

После долгого погружения в Backbone + Marionette я тренировался с Ember около недели. Я был в состоянии играть с этим и построить блог легко. Пока приложение опирается на маршруты, это нормально. Теперь я хотел бы создать приложение, которое имеет только 2 маршрута и больше зависит от состояний. Я хочу определить следующую вложенную структуру HTML:

<div id="topbar"></div>
<div id="content"></div>
<div id="botbar"></div>

Я бы хотел, чтобы topbar и botbar оставались неизменными независимо от содержимого. Контент может быть "pos content"

<div id="pos">
    <div id="leftsidebar">...</div>
    <div id="cart">...</div>
    <div id="buttons">...</div>
    <div id="rightsidebar">...</div>
    <div id="header">...</div>
</div>

или "содержание params"

<div id="params">...</div>

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

App = Em.Application.create({});

App.Router.map(function() {
    this.route('index', { path: '/' });
    this.route('params', { path: '/params' });
});

App.IndexRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render();
        this.render('topbar', { outlet: 'topbar' });
        this.render('pos', { outlet: 'content' });
        this.render('botbar', { outlet: 'botbar' });
    }       
});     

App.ParamsRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render();
        this.render('topbar', { outlet: 'topbar' });
        this.render('params', { outlet: 'content' });
        this.render('botbar', { outlet: 'botbar' });
    }
});

Я вижу в расширении chrome Ember, что маршруты определены, и мои контроллеры (TopbarController, BotbarController и PosController/ParamsController в зависимости от маршрута), кажется, созданы.

Теперь то, что я хотел бы, идет глубже, и у меня есть контроллер для каждой розетки (левый борт, тележка и т. Д.), Но я понятия не имею, как построить второй уровень вложенности.

Документация, кажется, не помогает мне, и Google не мой друг в этом:(Не могли бы вы, ребята, помочь мне? Спасибо.

Answer 1

Розетки в тёмном месте контекстуальны текущему активному маршруту.

Если у вас есть следующий шаблон приложения

<div id="topbar">
  {{ outlet 'topbar' }}
</div>
<div id="content">
  {{ outlet }}
</div>
<div id="botbar">
  {{ outlet 'botbar' }}
</div>

Вы можете очистить свой повторяющийся код, переместив его в ApplicationRoute

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(){
    this._super.apply(this, arguments);
    this.render('topbar',{outlet: 'topbar', into: 'application'})
    this.render('botbar',{outlet: 'botbar', into: 'application'})

  }
})

Теперь вы можете иметь следующий шаблон индекса

<div id="index">
  <div id="left">
    {{ outlet "left" }}
  </div>
  <div id="content">
    {{ outlet }}
  </div>
  <div id="right">
    {{ outlet 'right' }}
  </div>
</div>

Вам необходимо уточнить, в каком контексте находится розетка, отобразив ее "в".

App.IndexRoute = Ember.Route.extend({
  renderTemplate: function(){
    this._super.apply(this, arguments);
    this.render('right',{outlet: 'right', into: 'index'})
    this.render('left',{outlet: 'left', into: 'index'})

  }
})