EmberJS - 编写帮助函数

您可以向模板添加额外的功能，并将来自模型和组件的原始值转换为适合用户的正确格式。如果您多次使用 HTML 应用程序，那么您可以从任何 Handlebars 模板添加一个自定义帮助函数。如果当前上下文发生改变，Ember.js 会自动执行该帮助函数，并用更新后的值更新 DOM。

语法

export function Helper_Name([values]) {
   //code here
}

export default Ember.Helper.helper(Helper_Name);

下表列出了不同使用帮助函数名称的方式−

序号	帮助函数名称和描述
1	帮助函数参数您可以在帮助函数名称后指定参数，向该帮助函数传递多个参数。
2	命名参数您可以传递命名参数，以及相关的值。
3	转义 HTML 内容该函数用于在显示结果时转义 HTML 标记。

示例

下面给出的示例实现了该帮助函数，它接受多个输入并返回一个输出。使用以下命令创建一个新的帮助函数 −

ember generate helper helper-name

在此示例中，我们使用名称writinghelper创建了这个帮助函数。现在打开在app/helpers/下创建的writinghelper.js 文件。

import Ember from 'ember';

export function formatHelper([value]) {
   let var1 = Math.floor(value * 100);
   let cents = value % 100;
   let var3 = '$';
   if (cents.toString().length === 1)
   return `${var3}${var1}`;
}

export default Ember.Helper.helper(formatHelper);

您可以在大括号内，在模板中使用“writinghelper”帮助函数。打开index.hbs 文件，并编写以下代码 −

Value is : {{writinghelper 5}}
{{outlet}}

在上方的代码中，我们在模板中传递了帮助函数值，该值将美分计数显示为格式化字符串。

输出

运行 ember 服务器；您将收到以下输出 −

emberjs_template.htm

打印页面

上一个

下一个

序号	帮助函数名称和描述
1	帮助函数参数您可以在帮助函数名称后指定参数，向该帮助函数传递多个参数。
2	命名参数您可以传递命名参数，以及相关的值。
3	转义 HTML 内容该函数用于在显示结果时转义 HTML 标记。