JavaScript での表示ラベルの取得

静的表示ラベル

静的表示ラベルは、"$Label.c.task_mode_today" のように、1 つの文字列で定義します。フレームワークは静的表示ラベルをマークアップか JavaScript コードで解析し、コンポーネントの読み込み時にクライアントに表示ラベルを送信します。表示ラベルを解決するためのサーバとの往復は必要ありません。静的表示ラベルを JavaScript コードで取得するには、$A.get() を使用します。次に例を示します。

1var staticLabel = $A.get("$Label.c.task_mode_today");

動的表示ラベル

表示ラベルは JavaScript コードで動的に作成できます。この技法が便利なのは、実行時に動的に作成されるまで不明な表示ラベルを使用する必要があるときです。

1// Assume the day variable is dynamically generated
2// earlier in the code
3// THIS CODE WON’T WORK
4var dynamicLabel = $A.get("$Label.c." + day);

クライアントが表示ラベルをすでに把握している場合は、$A.get() によって表示ラベルが表示されます。この値が把握されていない場合、本番モードでは空の文字列が表示され、デバッグモードでは表示ラベルキーを示すプレースホルダ値が表示されます。

表示ラベル "$Label.c." + day" は動的に作成されるため、コンポーネントが要求されるとき、フレームワークは表示ラベルを解析してクライアントに送信できません。dynamicLabel は空の文字列ですが、これでは困ります。

別のアプローチによって $A.get() を使用し、動的に生成される表示ラベルを操作できます。

動的に生成された既知の表示ラベルをコンポーネントで使用する場合は、JavaScript リソースで表示ラベルの参照を追加して、表示ラベルのサーバの往復を避けることができます。コンポーネントが要求されると、フレームワークはこれらの表示ラベルをクライアントに送信します。たとえば、$Label.c.task_mode_today と $Label.c.task_mode_tomorrow の表示ラベルキーがコンポーネントによって動的に生成される場合は、クライアント側コントローラまたはヘルパーなど、JavaScript リソースのコメントで表示ラベルの参照を追加します。

1// hints to ensure labels are preloaded
2// $Label.Related_Lists.task_mode_today
3// $Label.Related_Lists.task_mode_tomorrow

コードによって多くの表示ラベルが生成される場合、このアプローチでは適切にスケールされません。

潜在的な表示ラベルのコメントヒントのすべては追加しない場合、$A.getReference() を使用することもできます。このアプローチでは、サーバとの往復というコストをかけて表示ラベルの値を取得することになります。

次の例では、$A.getReference() をコールして表示ラベルの値を動的に作成し、取得した表示ラベルで tempLabelAttr コンポーネント属性を更新しています。

1var labelSubStr = "task_mode_today";
2var labelReference = $A.getReference("$Label.c." + labelSubStr);
3cmp.set("v.tempLabelAttr", labelReference);
4var dynamicLabel = cmp.get("v.tempLabelAttr");

$A.getReference() は表示ラベルの参照を返します。これは文字列ではないため、文字列のように扱わないでください。文字列の表示ラベルを $A.getReference() から直接取得することはありません。

その代わりに、返された参照を使用して、コンポーネントの属性値を設定します。このコードでは、cmp.set("v.tempLabelAttr", labelReference); でこれを行っています。

表示ラベルの値がサーバから非同期に返されるとき、属性値は参照���あるために自動的に更新されます。コンポーネントは再表示されて、表示ラベルの値が表示されます。

表示ラベルパラメータの動的な置換

{0} などのプレースホルダパラメータが表示ラベルの値に含まれる場合は、$A.util.format() を使用して、動的な値でパラメータを置き換えます。値が Your balance is {0} points になっている $Label.Balance.Points 表示ラベルの例を見てみましょう。

1var placeholderLabel = $A.get("$Label.Balance.Points");
2
3// assuming actualPoints was set earlier in the code
4// $A.util.format() replaces {0} with actualPoints
5var balancePoints = $A.util.format(placeholderLabel, actualPoints);
6if (cmp.isValid()) {
7    cmp.set("v.points", balancePoints);
8}