我们最近从Ember 2+转换到Ember 3.18.0，我很难从一个组件调用控制器函数。在以前的版本中，我们使用sendAction来冒泡操作，但现在sendAction已经过时了，并且使用了闭包，我无法正确地进行操作。
下面是我的代码
Controller.hbs
{{generic-err-modal err=receivedErr showDialog= this.showErrorModal onSave=(action "closePromptDialog")}}Controller.js
@action
closePromptDialog(){
this.set("showErrorModal",false);
}Component.hbs
{{#if @showDialog}}
<PaperDialog id="genericModal" class="flex-50" @fullscreen={{fullscreen}} @onClose={{action "closePromptDialog"}} @origin={{dialogOrigin}}>
<PaperDialogContent class="text-align-center">
{{paper-icon "remove_circle_outline" class="red" size=48}}
</PaperDialogContent>
<PaperDialogContent>
<h2>{{@err.errorMessage}}</h2>
</PaperDialogContent>
<PaperDialogActions @class="layout-row">
<span class="flex"></span>
<PaperButton @primary={{true}} @onClick={{action "hideModal"}} @raised={{true}}>Ok</PaperButton>
</PaperDialogActions>
</PaperDialog>
{{/if}}Component.js
@action
hideModal(){
this.args.onSave();
}在这我得到错误作为
Uncaught TypeError: method is not a function任何帮助都将不胜感激。
我使用的Ember版本是3.18.0
1条答案
按热度按时间yhived7q1#
从Octane版本开始，Ember中的一切都变得更加明确了其中一😃个就是
{{action}}助手来传递函数。在经典（pre-octane）模型中，当把一个字符串传递给action助手，比如{{action "closePromptDialog"}}时，Ember会在example in the guide.中提到的相应控制器的actions哈希中搜索closePromptDialog动作由于引入了原生类和
@action装饰器，我们不需要使用{{action}}帮助器和actions哈希。我们可以直接将方法传递给组件，而不需要3.18指南中提到的action帮助器。因此，Controller.hbs:
这里，
this.closePromptDialog将直接引用支持类中的方法，类似于任何其他类属性，如receivedErr。正确的this绑定将由@action装饰器负责。这同样适用于您在Component.hbs文件中的操作。