在ember.js中从组件发送动作到路由

Question

这是路线:

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        closeModal: function () {
            alert('asdf');
        }
    }
});

组件js代码:

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        closeModal: function () {
            this.sendAction('closeModal');
        }
    }
});

我想做的是(如代码所暗示的那样;))从组件到路由发送一个动作,以便路由可以对其进行操作.但是上面的代码不起作用 - 组件正确处理动作,但是sendAction它内部的调用方法没有做任何事情.

编辑:

我解决了这个问题:

this._controller.send('closeModal');在组件的动作方法中,然而这个解决方案并不满足我.Ember的作者说在ember 2.0中将删除控制器,因此在我的代码中我不想对它们进行任何引用.建议？

Answer 1

组件具有隔离的上下文.因此它对组件外部的任何事物(路由或控制器)一无所知.为了将组件中的操作发送到您的路径,您应该将路径的操作传递给模板中的组件,如下所示:

// your template
{{your-component closeModal="closeModal"}}

现在,当您调用this.sendAction('closeModal')组件时,它将触发模板中组件的操作,在这种情况下是closeModal您的路径的操作.

有关更多信息,请参阅文档(http://emberjs.com/api/classes/Ember.Component.html#method_sendAction)

更新2016年8月3日

对于那些在较新版本的Ember中遇到关闭操作的人,您也可以通过以下方式在此处使用此类操作:

// your template
{{your-component closeModal=(action "closeModal")}}

此操作助手将指向控制器的操作,您可以在组件中调用this.attrs.closeModal()或this.get('closeModal')()触发操作而不是调用sendAction.

这些操作的好处是操作可能返回一个可以在组件中使用的值.在模态的情况下,这可以例如用于确定是否可以关闭模​​态closeAction,如果它被调用,如果它返回false例如你可能决定阻止模态关闭.

作为旁注,关闭操作始终指向您的控制器,为了让它指向路由操作,您可以查看此插件:https: //github.com/DockYard/ember-route-action-帮手