Emberjs 组件操作

Question

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

有没有什么方法可以在没有这种连接的情况下将动作从组件发送到 router/controller？

Answer 1

您的 component.js 文件应该类似于：

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

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

的动作处理程序

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

{{my-example pickedObject='otherOpenObjectHandler}}

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

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

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

Emberjs 组件操作

Emberjs components actions

javascript

components

ember.js