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

Question

ember 的新手，并使用可组合的助手练习“Data Down，Actions Up”。这可能吗？这就是我正在尝试做的:

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

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

但我收到“无操作处理程序:toggleToppings”错误。

然后我试着对 child 做一个 Action ，像这样:

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

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

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

Answer 1

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

<div {{action toggleToppings}}>

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

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