ember.js - Ember.js 中是否有等效于布局 nil 的内容？

Question

我有一个 ember 应用程序，它有一个相当复杂的应用程序模板，每个页面都包含一个音频播放器、移动抽屉、标题等。

我的登录页面需要能够拥有自己的模板，而不需要这些东西。在 Ruby 中，我可以简单地做 layout => nil 来不使用应用程序模板，但我找不到这样做的方法是 ember。

我不想只隐藏我没有在这一页上使用的所有元素，也不想在其他每一页上都明确包含这些元素。有什么建议么？

Answer 1

您可以使用Ember.Route#renderTemplate定义命名的插座，以便您可以指定哪些插座将连接到某些路由的视图/模板/模式/控制器。

例如

说我有一个模板：

<script type="text/x-handlebars">
    {{#if showTemplate}}
    <h1>App</h1>
        {{outlet center}}
        {{outlet south}}
    {{else}}
        {{outlet blank}}
    {{/if}}
</script>

我有一个这样的应用程序控制器：

App.ApplicationController = Em.Controller.extend({
    title: 'Cool App',
    layout: true,
    useLayout: function() {
        return this.get('layout');
    }.property('layout')
});

我可以指定在应用程序模板下的哪些出口中加载哪些模板：

App.LeftRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('left', {
            into: 'application',
            outlet: 'center'
        });

        this.render('south', {
            into: 'application',
            outlet: 'south'
        });
    }
});

App.RightRoute = Em.Route.extend({
    renderTemplate: function() {
        this.render('right', {
            into: 'application',
            outlet: 'center'
        });
    }
});

对于这个特定的路由，我在via中设置了layout属性，这将导致应用程序模板删除其他模板。ApplicationControllercontrollerFor

App.BlankRoute = Em.Route.extend({
    setupController: function(controller, model) {
        var c = this.controllerFor('application');
        c.set('layout', false);
    },
    renderTemplate: function() {
        this.render('blank', {
            into: 'application',
            outlet: 'blank'
        });
    }
});

（见小提琴）

有了这个规范，在“正确的路线”上，只会显示“中心”的内容，“南出口”将是空白的。“空白路线”将加载到没有任何模板标记的插座中。

我知道这看起来需要付出很多努力，但这只是一个概念性示例，我确信可以对其进行改进。