Question

我不确定这个问题的标题是最好的，但我会描述我的情况。我有一个Ember应用程序，其中包含作为登录页面的“Home”路由，以及作为应用程序一部分的其他几个路由。 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>

然后我在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');
    }
  }
});

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

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

2 个答案: