EmberJS: Разная домашняя страница макета против приложения

Question

Я не уверен, что название этого вопроса является лучшим, но я опишу свою ситуацию. У меня есть приложение Ember с маршрутом «Главная», который является целевой страницей, и несколькими другими маршрутами, которые являются частью приложения. Шаблон «Главная» не использует какой-либо макет с другими шаблонами, но мне нужно иметь возможность перейти к этим другим маршрутам с маршрута «Главная».

Покушение 1 - Ветвление Шаблон приложения (то же имя на выходе):

<script type="text/x-handlebars"> 
    {{#if isHome}} 
     {{outlet main}} 
    {{else}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
      {{outlet main}} 
      {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

App.ApplicationController = Ember.Controller.extend({ 
    isHome: function(){ 
     return this.get('currentPath') == 'home'; 
    }.property('currentPath'), 
}); 

Это вызвало странный баг, когда первый шаблон воспроизводимые в пути еще после перехода с главной страницы не будет выгружать из DOM после последующих переходов. Я объяснил это тем, что экземпляр вывода main отличается в зависимости от оператора if, но это всего лишь предположение.

Попытка 2 - Ветвление Шаблон приложения (различные имена выходных):

<script type="text/x-handlebars"> 
    {{#if isHome}} 
     {{outlet home}} 
    {{else}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
      {{outlet main}} 
      {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

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

ПОПЫТКА 3 - Ветвление обертка элементы:

<script type="text/x-handlebars"> 
    {{#if isNotHome}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
    {{/if}} 
    {{outlet main}} 
    {{#if isNotHome}} 
     {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

Это в основном работает, но в результате оказывается HTML не завернуть содержание main outlet в <section>, как я бы ожидать. Вместо этого он обрабатывает тег <section>, как если бы он заканчивался в первом операторе if, который разбивает мой CSS.

Я чувствую, что, должно быть, мне не хватает чего-то фундаментального.

Answer 1

Так как-то я, должно быть, совершил неосторожную ошибку в моем звонке до renderTemplate. Вот что наконец-то сработало.

<script type="text/x-handlebars" data-template-name="application"> 
    {{#if isHome}} 
     {{outlet home}} 
    {{else}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
      {{animated-outlet name="main"}} 
      {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

App.ApplicationController = Ember.Controller.extend({ 
    isHome: function(){ 
     return this.get('currentPath') == 'home'; 
    }.property('currentPath'), 
}); 

App.HomeRoute = Ember.Route.extend({ 
    renderTemplate: function(){ 
     this.render({ outlet: 'home' }); 
    } 
}); 

App.OtherRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render({ outlet: 'main' }); 
    } 
}); 

Answer 2

Вы можете указать его из ApplicationRoute

App.ApplicationRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    if (expression) { 
     this.render('application'); 
    } else { 
     this.render('site'); 
    } 
    } 
}); 

Via http://emberjs.com/guides/routing/rendering-a-template/