英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论