Emberjs-temp-write-helpers
提供:Dev Guides
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 |
ヘルパー名の後に指定することにより、ヘルパーに複数の引数を渡すことができます。 |
2 |
関連する値とともに名前付き引数を渡すことができます。 |
3 |
結果の表示中に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サーバーを実行します。次の出力が表示されます-