javascript - ember - 关闭操作导致错误，除非在组件中提供操作，否则不会呈现页面

Question

我正在尝试了解闭包操作并且只是测试一些代码，但我似乎无法让它工作。在我的 index.hbs 模板中，我渲染了一个组件，如下所示:

{{test-component test=(action 'foo')}}

在我的 index.js Controller 中，我定义了操作 foo:

  foo: function () {
    console.log('foo executed');
  },

在我的 test-component.hbs 组件中，我有一个触发操作的按钮，如下所示:

<button {{action (action 'test')}}>Test Button</button>.

但是页面崩溃了，我在控制台中收到以下错误:Uncaught Error: An action named 'test' was not found

我可以通过在 test-component.hbs 中插入一个 test 操作来再次呈现页面，但是我的印象是你使用了闭包操作，你没有不需要在您的组件中放置任何东西吗？我在这里做错了什么？

Answer 1

考虑闭包操作的简单方法就是传递函数引用。

在你给定的代码中，当你说

{{test-component test=(action 'foo')}}

你基本上是在说

Grab the action 'foo' from the current context and pass it as the property test

您的特定示例的伪代码可能如下所示:

{{test-component test=IndexController.actions.foo}}

这意味着属性 test在 test-component 内指向与 Action foo 相同的函数在index Controller 。

因此，您只需直接使用它:

// test is an action passed into test-component
<button {{action test}}>Test Button</button>.

这是一个简单的 EmberTwiddle example .

当你说 {{action (action 'test')}}在你的test-component , 它正在寻找行动 test在其当前上下文中，即组件本身并且组件没有操作 test , 它有一个名为 test 的属性这恰好指向来自其外部上下文的操作，index Controller 。