Ember.js 将导出渲染为模态窗口

Question

我正在尝试渲染一个模态。为此，我使用 {{outlet modalOutlet}} 创建了一个自定义 socket 。我的应用程序模板有两个 socket ，默认 socket 和 modalOutlet。但是，当模态模板呈现为 {{outlet modalOutlet}} 时, 我的默认 {{outlet}}变空。

我如何更改它，以便默认 {{outlet}} 不会更改，因此我实际上可以渲染 {{outlet modalOutlet}}作为模式窗口，或作为侧边栏作为布局的一部分

我不确定这是因为我的代码，还是关于 renderTemplate()我缺少的方法。 jsFiddle with my code is here .

// Router
App.Router.map(function(){
    this.route('contributors');
    this.route('contributor', {path: '/contributors/:contributor_id'});
});


App.ContributorsRoute = Ember.Route.extend({
    model: function() {
        return App.Contributor.all();
    },
});

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

<script type="text/x-handlebars" data-template-name="application">  
    <nav>
        {{#linkTo "index"}}Home{{/linkTo}}
        {{#linkTo "contributors"}}Contributors{{/linkTo}}
    </nav>
    <div style='padding:5px;margin:5px;border:1px dotted red;'>
        Default Outlet
        {{outlet}}
    </div>
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>    
        modalOutlet
        {{outlet modalOutlet}}
    </div>
</script>

Answer 1

您必须渲染 contributors模板也是如此，因为当您转换到同级路由时，默认 socket 会被清除。

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributors');
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

但是，如果您像这样嵌套路由，则可以避免这种情况:

App.Router.map(function(){
    this.resource('contributors', function() {
        this.route('show', {path: ':contributor_id'});
    });
});

...并调整应用程序的其余部分以匹配新结构。在这种情况下，您需要指定位置 modalOutlet在于 into选项(在这种情况下: 'application' )