EmberJS：不同的布局主页与应用程序答案

【问题标题】：EmberJS: Different Layout Homepage vs ApplicationEmberJS：不同的布局主页与应用程序
【发布时间】：2014-01-27 13:18:27
【问题描述】：

我不确定这个问题的标题是否最好，但我会描述一下我的情况。我有一个 Ember 应用程序，其中包含作为登录页面的“主页”路由，以及作为应用程序一部分的其他几个路由。 Home 模板不与其他模板共享任何布局，但我需要能够从 Home 路由转换到这些其他路由。

尝试 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'),
});

这导致了一个奇怪的错误，即从主页转换后渲染到 else 路径的第一个模板在以后的转换后不会从 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>

然后我在HomeRoute 中重载renderTemplate 以将其指向家庭插座，但它拒绝将内容加载到该插座。

尝试 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。

我觉得我必须在这里遗漏一些基本的东西。

【问题讨论】：

你如何设置'isHome'变量的值？
@Adam 添加，见编辑

标签： templates ember.js handlebars.js

【解决方案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' });
    }
});

【讨论】：

【解决方案2】：

您可以从 ApplicationRoute 指定它

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

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

【讨论】：