如何为Ember Octane组件动态添加点击处理器——动态on修饰符

要实现仅在存在链接时为元素添加点击监听，同时避免重复嵌套代码，可以通过以下几种方式处理：

方法一：内联条件绑定事件处理函数 #

直接在{{on}}修饰符中使用条件判断，当this.hasLink为false时，传递undefined给事件处理参数，{{on}}会自动忽略该监听：

首先确保已在组件JS文件中导入on修饰符：

import { on } from '@ember/modifiers';

然后修改模板代码：

{{#let
  (if this.hasLink (component "external-library-button$special-button") (element "div"))
  as |MaybeAButton|
}}
  <MaybeAButton
    {{on "click" (if this.hasLink this.onClick)}}
  >
    ...lots of nested code
  </MaybeAButton>
{{/let}}

方法二：条件性渲染修饰符 #

通过{{#if}}块语法包裹修饰符，仅在满足条件时添加监听：

{{#let
  (if this.hasLink (component "external-library-button$special-button") (element "div"))
  as |MaybeAButton|
}}
  <MaybeAButton
    {{#if this.hasLink}}
      {{on "click" this.onClick}}
    {{/if}}
  >
    ...lots of nested code
  </MaybeAButton>
{{/let}}

错误原因说明 #

你之前尝试的{{(if this.hasLink (modifier on "click" this.onClick))}}写法存在两个问题：

1. {{on}}本身就是Ember提供的修饰符，不需要用modifier函数包装
2. 若未在组件中导入on修饰符，会触发“on不在作用域内”的错误，需确保已从@ember/modifiers导入on

内容的提问来源于stack exchange，提问作者SoluableNonagon