为什么embe.rjs在模板中看不到我的控制器方法？

Question

在项目中，我有模板输入：

 {{#if (communicationPreferenceIs '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}}

我需要一个条件渲染并将其包装在 if 构造中。在其中，我使用控制器中的方法

communicationPreferenceIs

来检查该值。这是它的代码：

App.EditController = Ember.Controller.extend(Ember.Evented, {
communicationPreferenceIs: function(preference) {
    const model = this.get('model');
    if (!model.communicationPreference || !model.communicationPreference.name) {
      return false;
    }

    const currentPreference = model.communicationPreference.name;

    return currentPreference === preference;
  }.property('model.communicationPreference'),
}

因此，在渲染时，我收到了 ember 错误：

"Assertion Failed: A helper named 'communicationPreferenceIs' could not be found"

我试验了一下，发现这个方法有效：

communicationPreferencePhone: function() {
    const model = this.get('model');
    return (
        model.communicationPreference &&
        model.communicationPreference.name === 'Phone'
    );
  }.property('model.communicationPreference'),

如果我在模式下使用它：

{{#if communicationPreferencePhone }}

效果很好。如何让

communicationPreferenceIs

更通用？

Answer 1

您看过此页面吗？ 全局辅助函数

要使用全局可用的辅助函数，您需要将它们放在 app/helpers 文件夹中。

在经典系统中，您可以使用短横线大小写来引用助手。

所以，

1. 定义

   app/helpers/communication-preference-is.js

export default ....

2. 通过

   {{communication-preference-is this.model "Phone"}}

   调用 或者通过

   {{otherFunction (communication-preference-is this.model "Phone")}}

   作为子表达式 就像 if 语句中发生的那样：

   {{#if (communication-preference-is this.model "Phone")}}
   
   {{/if}}
   

语法注意事项：

• {{ }}

  用于转义 HTML

• ( )

  用于子表达式（例如：调用 communications-preferenc-is）

• {{#

  区块开始

• {{/

  区块结束

空间上：

{{                     }} for escaping HTML
  #                       start of block
  /                       end of block
    (         )           sub expression
      (     )             sub expression (nested)

---

请注意，在 ember-source 4.5 之前，必须将助手包装在额外的函数中，

helper

// app/helpers/communication-preference-is.js
import { helper } from '@ember/component/helper';

export default helper(function communicationPreferenceIs(positionalArgs, namedArgs) {
    let [model, type] = positionalArgs;

    return (
        model.communicationPreference &&
        model.communicationPreference.name === type
    );
});

在 [email protected] 之后，你就能够

export default function communicationPreferenceIs(model, type) {
    return (
        model.communicationPreference &&
        model.communicationPreference.name === type
    );
}

使用 Ember Polaris（3.28+ 支持），您可以导入帮助器而不是依赖全局变量：

import communicationPreferenceIs from 'app-name/helpers/communication-preference-is';

<template>
  {{communicationPreferenceIs @model "Phone"}}
</template>

但在那一点上，您可能需要一个

app-name/helpers

文件，您可以从中导入任何内容，而不是每个助手导入一次。