Ember JS尝试将一个动作传递到一个命名块中时出现的问题

huangapple go评论54阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年6月26日 02:58:45
  • 转载请务必保留本文链接:https://go.coder-hub.com/76551991.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定