Question

我一直在尝试使用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挂钩的路径可能使用此.render（？）吹掉当前的DOM并从不同的基础（而不是application.hbs）重建。

思考？非常乐意澄清。

Answer 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上，我只是为包装器和页脚运行this.disconnectOutlet，似乎工作得很好。

不基于路线渲染/移除侧边栏

1 个答案: