Question

我实例化一个组件并附加一些关闭动作（Ember v1.13中的新内容）：

/app/templates/template.hbs

{{my-component key=val lookup=(action 'doLookup')}}

/app/templates/components/my-component.hbs

{{input value=coolField}}
<button {{action 'lookup' coolField}}>Look it up!</button>

/app/controllers/my-controller.js

export default Ember.Controller.extend({
  actions: {
    doLookup(field) {
      // do some work…
    }
  }
});

我的印象是，在这种情况下，我不需要在组件上定义一个操作来连接。但到目前为止，看起来这是必需的：

/app/components/my-component.js

export default Ember.Component.extend({
  actions: {
    lookup(field) {
      this.attrs.lookup(field);
    }
  }
});

我对如何使用关闭操作感到困惑吗？似乎在组件中连接动作就像以前一样（使用常规操作）。

Answer 1

我有完全相同的问题。这里至少有一种方法可以用来避免手动编写js代码来转发动作。

/app/templates/template.hbs

{{my-component key=val lookup=(action 'doLookup')}}

/app/templates/components/my-component.hbs

{{input value=coolField}}
<button {{action (action 'lookup' coolField)}}>Look it up!</button>

/app/controllers/my-controller.js

export default Ember.Controller.extend({
  actions: {
    doLookup(field) {
      console.log('Looking up with cool field value', field);
    }
  }
});

Answer 2

为您调整代码（我测试过并且有效）：

/app/templates/template.hbs =＆gt;没有变化

/app/templates/components/my-component.hbs

{{input value=coolField}}
<button {{action 'lookup'}}>Look it up!</button>

/app/controllers/my-controller.js =＆gt;没有变化

/app/components/my-component.js

export default Ember.Component.extend({
  actions: {
    lookup() {
      this.attrs.submit(this.get('coolField'));
    }
  }
});

此外，说明这样的行动的原因是（来自书籍Rock and Roll with Ember）：

＆＃34;关闭行动显然是对旧式冒泡行为的改进。它们更易于推理和调试，因为如果模板的上下文中不存在指定的操作，我们将收到明确的错误消息......＆＃34;

＆＃34;关闭操作只是函数的另一个优点是它们有一个返回值，我们可以在处理（调用）操作时使用它。可以利用这一点来查看上游操作是否成功或传回其他信息，而不是可能会冒泡。＆＃34;

从组件的模板

2 个答案: