Ember.js模板无法识别控制器带参方法communicationPreferenceIs的解决办法

你在模板里用(communicationPreferenceIs 'Phone')的语法，是Ember的助手函数调用格式，但communicationPreferenceIs是定义在控制器里的计算属性方法，并非Ember注册的全局/局部助手，所以框架找不到对应的助手，抛出错误。而无参的communicationPreferencePhone能正常工作，是因为它是标准的计算属性，模板直接访问其返回值，不需要主动调用。

方法1：注册全局自定义助手（推荐） #

把判断逻辑抽成全局助手，适配模板的带参调用语法：

// 在项目的全局脚本或助手文件中注册
Ember.Handlebars.helper('communication-preference-is', function(preference) {
  // 从当前上下文获取控制器的model
  const model = this.get('model');
  if (!model.communicationPreference || !model.communicationPreference.name) {
    return false;
  }
  return model.communicationPreference.name === preference;
});

模板中修改调用语法（符合Ember助手的短横线命名规范）：

{{#if (communication-preference-is 'Phone')}}
  <div class="row">
    <div class="col-md-4 form-label">
      Phone<i class="required">*</i>
    </div>
    <div class="col-md-8">
      {{input-validation
              type="text"
              required=true
              class="form-control"
              value=model.phone
              placeholder="Phone"
              pattern="[0-9]*"
              maxlength="30"
              onkeydown=""
              key-down="validateInput"
      }}
    </div>
  </div>
{{/if}}

方法2：控制器返回闭包函数+辅助调用助手 #

如果逻辑和控制器强绑定，不想抽成全局助手，可以让控制器的属性返回一个带参函数，再通过小助手执行：
首先修改控制器代码：

App.EditController = Ember.Controller.extend(Ember.Evented, { 
  communicationPreferenceIs: function() { 
    const model = this.get('model'); 
    // 返回一个接受preference参数的闭包函数
    return function(preference) {
      if (!model.communicationPreference || !model.communicationPreference.name) { 
        return false; 
      } 
      const currentPreference = model.communicationPreference.name; 
      return currentPreference === preference; 
    };
  }.property('model.communicationPreference'), 
});

然后注册一个用于执行函数的小助手：

Ember.Handlebars.helper('invoke', function(fn, ...args) {
  return fn(...args);
});

模板中调用：

{{#if (invoke communicationPreferenceIs 'Phone')}}
  <!-- 你的电话输入框代码 -->
{{/if}}

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