0

我已经用 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}}

ApplicationController在哪里showWrappers：

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 钩子的路由，可能使用 this.render ( ?) 吹走当前的 DOM 并从不同的基础（而不是 application.hbs）重建。

想法？非常乐意澄清。

4

1 回答 1

0

我发现了 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，而且似乎工作得很好。

于 2014-02-10T13:20:46.630 回答