Question

我正在尝试渲染一个模态。为此，我使用{{outlet modalOutlet}}创建了一个自定义插座我的应用程序模板有两个插座，默认插座和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模板，因为当您转换为兄弟路线时，默认插座会被清除。

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'）

Answer 2

问题是您的路由结构没有嵌套，一旦您嵌套路由，您将需要指定包含模态插座的路由。

你正在做什么渲染

申请 - ＆gt;提供者

显示您的列表，但是当您单击现在正在呈现的链接时

申请 - ＆gt;贡献者

并删除了Contributor模板。

如果您嵌套路线，请执行以下操作：

申请 - ＆gt;贡献者 - ＆gt;贡献者

然后，您仍然会有显示列表的Contributors模板。

updated JSFiddle

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

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

Ember.js渲染出口作为模态窗口

2 个答案: