EmberJS-ヘルパーの作成

テンプレートに追加の機能を追加し、モデルおよびコンポーネントの生の値をユーザーに適した形式に変換できます。 HTMLアプリケーションを複数回使用している場合、任意のHandlebarsテンプレートからカスタムヘルパーを追加できます。現在のコンテキストが変更されると、Ember.jsは自動的にヘルパーを実行し、更新された値でDOMを更新します。

構文

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

export default Ember.Helper.helper(Helper_Name);

次の表は、ヘルパー名を使用するさまざまな方法を示しています-

S.No.

Helper Names & Description

1

Helper Arguments

ヘルパー名の後に指定することにより、ヘルパーに複数の引数を渡すことができます。

2

Named Arguments

関連する値とともに名前付き引数を渡すことができます。

3

Escaping HTML Content

結果の表示中に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サーバーを実行します。次の出力が表示されます-

Ember.jsテンプレート作成ヘルパー

Emberjs-temp-write-helpers

EmberJS-ヘルパーの作成

構文

例

出力

目次