如何在Ember.js的If语句中调用action并实现条件判断逻辑

失效原因 #

原有代码无法生效存在两个核心问题：

• Ember的Handlebars模板不支持直接在{{#if}}块内使用==这类JavaScript运算符做条件判断，必须使用对应功能的模板助手
• HTML中disabled为布尔属性，直接书写disabled="false"不会生效，只要标签上存在disabled属性就会触发禁用效果，必须绑定布尔类型的值才能正确控制状态

修正方案 #

方案1：兼容原有if分支逻辑的写法 #

使用Ember内置的eq等值比较助手替换直接写==的语法：

{{#each this.model.data as |entity|}}
  <tr>
    {{#if (eq entity.workflowTask.id this.currentlyLoggedUserId)}}
      <td><input type="checkbox" disabled={{false}}></td>
    {{else}}
      <td>
        <input 
          type="checkbox" 
          checked={{this.allChecked}} 
          onclick={{action (action "getSelectedMerchant" entity.id) value="target.checked"}}
        >
      </td>
    {{/if}}
  </tr>
{{/each}}

方案2：更简洁的属性绑定写法 #

无需写if else分支，直接把disabled属性绑定到eq助手的返回结果即可，代码更易维护：

{{#each this.model.data as |entity|}}
  <tr>
    <td>
      <input 
        type="checkbox" 
        disabled={{eq entity.workflowTask.id this.currentlyLoggedUserId}}
        checked={{this.allChecked}}
        onclick={{action (action "getSelectedMerchant" entity.id) value="target.checked"}}
      >
    </td>
  </tr>
{{/each}}

低版本兼容说明 #

如果你使用的是Ember 3.1以下的旧版本，框架没有内置eq助手，可以手动创建通用比较助手，文件路径为app/helpers/eq.js，代码如下：

import { helper } from '@ember/component/helper';

export default helper(function eq([paramA, paramB]) {
  return paramA === paramB;
});

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