Ember.js渲染插座作为模态窗口

Question

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

我如何改变它，使默认{{口}}不会改变，所以我其实可以呈现{{outlet modalOutlet}}为模态窗口，或作为一个侧边栏的布局

我的一部分m不知道这是由于我的代码，还是有关我缺少的方法。该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.Router.map(function(){ 
    this.resource('contributors', function() { 
     this.route('show', {path: ':contributor_id'}); 
    }); 
}); 

...和调整您的应用程序的其他部分相匹配的新的结构。在这种情况下，您需要指定modalOutlet所在的位置into选项（在这种情况下为'application'）

Answer 2

问题是你的路由结构不是嵌套的，一旦你嵌套你的路由，你将需要指定包含模式插座的路由。

正在发生的事情是你渲染

应用程序 - >提供者

，以显示你的列表中，但是当你点击一个链接，你现在渲染

应用 - >投稿人

一个d Contributor模板被删除。

如果你的巢的路线，像这样：

应用程序 - >提供者 - >贡献者

然后，你将仍然有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' 
     }); 
    } 
});