英文:
Ember JS Issues With Trying To Pass an Action Into a Named Block
问题
我正在尝试在 Ember.js 中从头开始创建一个模态组件,但在打开模态的按钮上遇到了问题。我想允许通过一个名为 <:buttonContent></:buttonContent>
的块将打开按钮传递给组件,并传递打开模态的函数。但以这种方式进行的打开操作只能工作一次,然后再次点击按钮时不起作用。我可以看到按钮状态是正确的,如果我在模态组件中直接使用按钮,它会按预期工作。
{{!-- 使用组件的模板 --}}
<Modal>
<:buttonContent as |action|>
<Button::Basic @action={{action}}>
AddCoin
</Button::Basic>
</:buttonContent>
<:default>
</:default>
</Modal>
{{!-- 组件的模板 --}}
{{#if (has-block "buttonContent")}}
{{yield this.open to="buttonContent" }}
{{/if}}
{{#if this.isOpen}}
<div class="curtain">
</div>
{{/if}}
{{#if this.isOpen}}
<div class={{concat "modal " ( if this.isOpen 'open' 'closed')}} {{focus-trap isActive=this.isOpen focusTrapOptions=this.focusTrapOptions}}>
<Button::Icon @icon="close" @action={{this.close}} class="close-button"></Button::Icon>
<div class="modal-content">
{{yield}}
</div>
</div>
{{/if}}
// 组件控制器
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class ModalComponent extends Component {
@tracked isOpen= false;
focusTrapOptions = {
allowOutsideClick: this.clickOutside
}
@action clickOutside(): boolean {
this.close();
return false;
}
@action open(): void {
this.isOpen = true;
}
@action close(): void {
this.isOpen = false;
}
}
我尝试在动作上放置了一个调试器断点,可以看到它在第一次调用时被触发,但所有后续调用都不会触发它。我还可以看到页面上其他按钮仍然有效,即使打开模态按钮不起作用。
英文:
I'm trying to make a modal component from scratch in ember js and I'm running into an issue with the button to open the modal. I want to allow the open button to be passed to the component using a block called <:buttonContent></:buttonContent>
and pass in the function to open the modal. For some reason with this approach the open action only works once and then the button does nothing when clicking it. I can see that the button state is correct and it works as expected if I use a button directly in the modal component.
{{!-- template using component--}}
<Modal>
<:buttonContent as |action|>
<Button::Basic @action={{action}}>
AddCoin
</Button::Basic>
</:buttonContent>
<:default>
</:default>
</Modal>
{{!-- template for component --}}
{{#if (has-block "buttonContent")}}
{{yield this.open to="buttonContent" }}
{{/if}}
{{#if this.isOpen}}
<div class="curtain">
</div>
{{/if}}
{{#if this.isOpen}}
<div class={{concat "modal " ( if this.isOpen 'open' 'closed')}} {{focus-trap isActive=this.isOpen focusTrapOptions=this.focusTrapOptions}}>
<Button::Icon @icon="close" @action={{this.close}} class="close-button"></Button::Icon>
<div class="modal-content">
{{yield}}
</div>
</div>
{{/if}}
// component controller
import { action } from '@ember/object';
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
export default class ModalComponent extends Component {
@tracked isOpen= false;
focusTrapOptions = {
allowOutsideClick: this.clickOutside
}
@action clickOutside(): boolean {
this.close();
return false;
}
@action open(): void {
this.isOpen = true;
}
@action close(): void {
this.isOpen = false;
}
}
I tried putting in a debugger breakpoint on the action and can see that it gets hit on the first call but all subsequent calls don't trigger it. I can also tell that other buttons still work on the page even though the open modal button doesn't.
答案1
得分: 1
将注释移至答案以用于SEO内容:
action
一词的任何使用都有与一些旧/遗留/经典(pre-octane)行为/范式发生冲突的风险。- 在模板中,
action
是一个关键字。 action(s)
在旧/遗留/经典(pre-octane)组件类中具有特殊含义。
这种行为计划在Ember v6中删除/修复 🤞(RFC待定,当然)。"经典Ember"在Ember v5.0中尚未完全弃用。
英文:
Moving comments to an answer here for SEO stuff:
any usage of the word action
is at risk of conflicting with some old/legacy/classic (pre-octane) behaviors/paradigms.
- action is a keyword in templates
- action(s) has special meaning in components' classes for old/legacy/classic (pre-octane)
This behavior is on the slate for removing / fixing for Ember v6 🤞 (RFC Pending, ofc). "classic ember" isn't fully deprecated yet, in ember v5.0
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论