gpt4 book ai didi

ember.js - Ember 3+ 将 Action 从组件传递到 Controller 不起作用

转载 作者:行者123 更新时间:2023-12-02 05:58:44 25 4
gpt4 key购买 nike

我们最近从 ember 2+ 转移到 Ember 3.18.0,我正在努力从组件调用 Controller 函数。在以前的版本中,我们使用 sendAction 来冒泡操作,但现在由于 sendAction 已贬值并且正在使用闭包,我无法正确执行它。

下面是我的代码

Controller .hbs

{{generic-err-modal err=receivedErr showDialog= this.showErrorModal onSave=(action "closePromptDialog")}}

Controller .js

@action
closePromptDialog(){
this.set("showErrorModal",false);
}

组件.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}}

组件.js

@action
hideModal(){
this.args.onSave();
}

在此我收到错误为

Uncaught TypeError: method is not a function

任何帮助将不胜感激。

我使用的Ember版本是3.18.0

最佳答案

从 Octane 版本开始,Ember 中的一切都变得更加明确 😃 其中之一就是用于传递函数的 {{action}} 帮助器。在经典(前辛烷值)模型中,当将字符串传递给 action 帮助器(如 {{action "closePromptDialog"}})时,Ember 将搜索操作 closePromptDialog 位于相应 Controller 的 actions 哈希值内,如 example in the guide. 中所述。

由于引入了原生类和@action装饰器,我们不必使用{{action}}帮助器以及actions 哈希。我们可以直接将方法传递给组件,而无需操作助手,如 guides of 3.18 中所述。 。所以,

Controller .hbs:

{{generic-err-modal 
err=receivedErr
showDialog=this.showErrorModal
onSave=this.closePromptDialog
}}

在这里,this.closePromptDialog 将直接引用支持类中的方法,类似于您的情况中的任何其他类属性,例如 receivedErr。正确的 this 绑定(bind)将由 @action 装饰器处理。这同样适用于 Component.hbs 文件中的操作。

关于ember.js - Ember 3+ 将 Action 从组件传递到 Controller 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62529313/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com