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 標記。