New ember.js routing: как подключить розетки?

Я запутался, как подключать розетки к новому маршрутизатору.

index.html

...
<script type="text/x-handlebars" data-template-name="application">
  <h4>The application handelbar</h4>
  {{! outlet 1}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h4>The index handelbar</h4>
  {{! outlet 2 and 3}}
  {{outlet nav}}
  {{outlet main}}
</script>

<script type="text/x-handlebars" data-template-name="main">
  <h4>The main handelbar</h4>
</script>

<script type="text/x-handlebars" data-template-name="nav">
  <h4>The nav handelbar</h4>
</script>
...

app.js:

...
App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});

App.IndexController = Ember.Controller.extend({
});

App.IndexView = Ember.View.extend({
  templateName: 'index'
});
...

Этот код отображает выход-1.

Вопросы:

Почему производится вывод-1? Как подключаются разъемы "1" и "индекс"?
Как подключить розетки 2 и 3 к одному и тому же "индексному" сайту?

Спасибо
MIW

Ответ 1

Вам нужно указать этот материал в обработчике маршрута, используя метод renderTemplate (или метод renderTemplates, в зависимости от вашей сборки).

То, что вы не видите, это то, что Ember уже установил для вас несколько настроек по умолчанию. Фактически, значения по умолчанию, заданные Ember, позволили вам опустить весь обработчик маршрута.

App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});
App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render(); 
     /* this is the default, it will basically render the
        default template, in this case 'index', into the 
        application template, into the main outlet (i.e. your 
        outlet 1), and set the controller to be IndexController.
     */

  }
});

Что вы хотите - это визуализировать дополнительные шаблоны в функции renderTemplate, likeo:

  renderTemplate: function() {
     this.render("index"); 
     // this renders the index template into the primary unnamed outlet. 
     this.render("navtemplate", {outlet: "nav"}); 
     // this renders the navtemplate into the outlet named 'nav'.
     this.render("main", {outlet: "main"});
     // this renders the main template into the outlet named 'main'.
  }

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

Ответ 2

Ember автоматически принимает/сопоставляет с IndexRoute, IndexController и IndexView. Это находится в направляющей маршрутизации ember

Чтобы подключить вложенные маршруты, вы можете сделать это следующим образом:

App.OtherRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render('otherTemplate', {
      into: 'index',
      outlet: 'nav'
     }); 
  }
});

Здесь - более подробный ответ от другого вопроса.