Ember JS：如何使用可组合的助手练习 'Data Down, Actions Up'？

Question

ember 新手，正在练习 'Data Down, Actions Up' 使用可组合的助手。这可能吗？这就是我正在尝试做的事情：

//parent template
{{pizza-toppings toggleToppings=(action (toggle 'toppings' this 'mushrooms' 'anchovies'))}}

//child component template
<div {{action "toggleToppings"}}>

但是我收到 'no action handler for: toggleToppings' 错误。

然后我尝试对 child 进行操作，如下所示：

//child component template 
<div {{action "togglePizza"}}>

//child component JS
actions: {
   togglePizza() {
          this.get('toggleToppings')();
   }
}

但是当我点击它时，什么也没有发生。 :( 如何从我的组件模板中调用我的 parent 操作？

Answer 1

将子组件模板更改为以下内容：

<div {{action toggleToppings}}>

当您使用引号时，您是在告诉 handlebars 在当前上下文的操作散列中查找该名称的操作（如果未找到，则冒泡该操作）。但是，当您将一个动作（一个动作实际上只是一个绑定函数）从父级传递到这个组件时，您不会将它添加到动作散列中，您只是将它作为属性添加到组件的上下文。

至于为什么后第二次尝试对您无效，我怀疑它确实有效，但操作处理程序有一些其他不相关的问题。将调试器添加到 "toggle" 帮助程序将使您知道它是否以及何时被调用。

Ember JS：如何使用可组合的助手练习 'Data Down, Actions Up'？

Ember JS: How can I practice 'Data Down, Actions Up' with composable helpers?

ember.js