0

在我的 EmberJS 应用程序中，我有两条单独的路线，如下所示，

路线 A - “main/books/add” 路线 B ​​- “main/authors/add”

我在 Route A 模板中有一个“添加作者”按钮，当用户按下该按钮时，我想以模式加载和呈现 Route B 以添加新作者。

我知道通过使用路由的 render 方法来渲染 Route B 模板和相应的控制器，可以实现一些微笑。但在这种情况下，“main/authors/add.js”文件中Route B的“model”钩子不会被调用。

如果有人可以建议我一种将单独的路线呈现为模态的方法，那就太好了。

4

1 回答 1

0

编辑-虽然这是完全有效的（渲染到使用命名插座的前提，视图现在在 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”）中

您还需要编写一些逻辑来触发模式在元素插入时打开。为此，我将使用视图didInsertElement中的操作modal：

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
    }
});
于 2015-07-15T10:01:11.517 回答