在我的 EmberJS 应用程序中，我有两个单独的路由，如下所示，
路线 A -“主要/书籍/添加” 路线 B - “主要/作者/添加”
我在 Route A 模板中有一个“添加作者”按钮，当用户按下该按钮时，我想在模式中加载和呈现 Route B 以添加新作者。
我知道通过使用路由的 render 方法来渲染 Route B 模板和相应的控制器，可以实现一些微笑。 但是在这种情况下，“main/authors/add.js”文件中Route B的“model”钩子不会被调用。
如果有人可以建议我一种将单独的路线呈现为模态的方法，那就太好了。
【问题讨论】：
标签： ember.js ember-router ember-model
编辑 - 虽然这是完全有效的（渲染到使用命名插座的前提下，视图现在在 Ember 1.1 中已被弃用。同样可以通过使用组件来实现
是的，你可以这样做：
您想要做的是在模板中创建一个模态并为其分配一个命名的插座（或创建一个带有插座的模态视图）：
在modal.hbs:
<div class='modal'>
{{outlet "modalContent"}}
</div>
然后我会像这样覆盖您的基本按钮：
App.BasicButton = Em.View.extend({
context: null,
template: Em.Handlebars.compile('<button>Click Me!</button>');
click: function(evt) {
this.get('controller').send('reroute', this.get('context'));
}
});
并在您的模板中设置您的按钮以触发您的模式：
在trigger.hbs
<!-- content and buttons for doing stuff -->
{{View App.BasicButton context='modalContent'}}
最后，你想在你的路由中创建一个方法来处理将特定内容渲染到你的插座：
App.TriggerRoute = Em.Route.extend({
actions: {
reroute: function(route) {
this.render(route, {into: 'modal', outlet: route});
}
}
});
所以本质上，您将模板（称为“modalContent”）渲染到特定的出口（称为“modalContent”）中，位于模板/视图（称为“modal”）中
您还需要编写一些逻辑来触发模式在元素插入时打开。为此，我将在 modal 视图中使用 didInsertElement 操作：
App.ModalView = Em.View.extend({
didInsertElement: function() {
this.$.css("display", "block");
//whatever other properties you need to set to get the modal to pop up
}
});
【讨论】：