Emberjs 组件操作答案

【问题标题】：Emberjs components actionsEmberjs 组件操作
【发布时间】：2015-08-08 05:39:21
【问题描述】：

我正在尝试使用 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"}}

有没有办法在没有这种连接的情况下将动作从组件发送到路由器/控制器？

【问题讨论】：

"targetObject" 是一个指向父视图控制器的属性，您可以发送该对象，但据我所知，这不是一个好方法，因为它有点扼杀了组件应该是自包含的意识形态——如果代码的其他地方需要使用相同的组件但“openObject”应该做其他事情怎么办？扼杀灵活性。 emberjs.com/api/classes/…
你应该依赖动作冒泡。稍后我会发布一个示例（现在吃午饭）
同样在你的控制器示例中——是自定义的吗？
我已经理解了，非常感谢！

标签： javascript ember.js components

【解决方案1】：

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

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

当 openObject 动作被触发时，组件会将动作向上冒泡为“openObjectHandler”，并传入数据。因此，您的控制器需要实现一个名为“openObjectHandler”的操作处理程序。

表达这一点的另一种方式是当您在模板中使用它时将参数传递给 Web 组件（将优先于 component.js 中的pickObject）：

{{my-example pickedObject='otherOpenObjectHandler}}

在当前路由层次结构中的活动控制器中处理这样的操作，例如您的应用程序控制器：

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

这是我正在研究的 JSBin，它使用这种技术将动作冒泡到控制器：
JSBin Demo

【讨论】：

非常感谢，你花时间陪我太愉快了！