Emberjs组件动作

Emberjs components actions

本文关键字：组件 Emberjs      更新时间：2023-09-26

我正在尝试使用Emberjs组件。我在行动上遇到了麻烦。

这里是我的组件:

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

这里是我的控制器，我也在路由中创建了相同的动作

export default Ember.Controller.extend(
    {
        actions: {
            openObject: function (id) {
                    self.transitionToRoute('objects.bc', id);
            }
        }
    }
);

我所需要的只是通过动作从组件进行转换。

只有当我以这种方式连接控制器动作和组件动作时，它才能工作:

{{bc-table openObject="openObject"}}

有没有办法发送动作从组件到路由器/控制器没有这样的连接?

你的component.js文件应该是这样的:

export default Ember.Component.extend({
  pickedObject: 'openObjectHandler',
  actions: {
    openObject: function (data) {
      this.sendAction('pickedObject', data);
    }
  },
...

当openObject动作被触发时，组件将向上冒泡泡动作作为'openObjectHandler'，传递数据。所以你的控制器需要实现一个名为"openObjectHandler"的动作处理程序。

另一种表达方式是，当你在模板中使用它时，像这样将参数传递给web组件(将优先于component.js中的pickdobject):

{{my-example pickedObject='otherOpenObjectHandler}}

在当前路由层次结构中活动的控制器中像这样处理动作，比如你的应用控制器，例如:

actions: {
  openObjectHandler: function(data) {
    // do something here
    console.log('openObjectHandler: '+data);
  }
}

这是我正在做的一个JSBin，它使用这种技术将一个动作冒泡到控制器上:
JSBin演示

相关文章：