不根据路线渲染/删除侧边栏答案

【问题标题】：Not rendering/removing sidebar based on route不根据路线渲染/删除侧边栏
【发布时间】：2014-02-10 12:01:30
【问题描述】：

我已经用 Ember 试验了几个小时但无法解决的问题。希望这只是我在阅读 Ember 文档时遇到的一个术语问题。

我有一个应用程序，它大部分由侧边栏/顶部栏（称为包装器）和页脚组成。

我的基本 application.hbs 看起来像这样（我使用 Ember App Kit 来提供结构）：

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

如果这是我的应用程序的状态，它会工作得很好。页面内容可以在 {{outlet}} 中加载。

我的主要问题是如何以“Ember”的方式打破这个模板结构（最好不要使用所有 jQuery 并随意删除 DOM 元素）。

我有一些我不希望包装器和页脚显示的路由（它们是全页登录/忘记密码路由，以及一些最小界面/无干扰模式）。

我尝试通过制作默认模板 (application.hbs) 来删除侧边栏和页脚：

{{#if showWrappers}}
    {{partial "wrapper"}}
{{/if}}

{{outlet}}

{{#if showWrappers}}
    {{partial "footer"}}
{{/if}}

showWrappers 在 ApplicationController 中的位置：

export default Ember.Controller.extend({

    showWrappers: function() {
        var routes = ['login'],
                currentPath = this.get('currentPath'),
                show = true;

        routes.forEach(function(item) {
                var path = new RegExp('^' + item + '*');
                if (!Ember.isEmpty(currentPath.match(path))) {
                    show = false;
                }
        });

        return show;
    }.property('currentPath'),

});

尝试使用 {{link-to}} 从 / 转换到 /login 会返回错误：Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM 大概是因为我正在删除 Ember 想要保留的东西（我正在使用 {{link-to}} 和{{bind-attr}} 在边栏中，所以那里有绑定）。

我知道我可以使用动作和 jQuery 来隐藏页面元素并将它们带回“无干扰”模式，但我更愿意学习如何构建模板并使用带有 renderTemplate 钩子的路由可能使用这个.render (?) 清除当前 DOM 并从不同的基础（而不是 application.hbs）重建。

想法？非常乐意澄清。

【问题讨论】：

标签： ember.js ember-app-kit

【解决方案1】：

我发现了 disconnectOutlet，并将我的部分转换为插座：

{{outlet wrapper}}

{{outlet}}

{{outlet footer}}

让我的 ApplicationRoute 默认呈现给他们：

export default Ember.Route.extend({

    renderTemplate: function() {
        this.render();

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

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

});

然后在 LoginRoute 上，我只为 wrapper 和 footer 运行 this.disconnectOutlet，似乎工作得很好。

【讨论】：