Lightning コンポーネント開発者ガイド
jコンポーネントのバンドル内の JavaScript コードの共有
ヘルパー関数は、コンポーネントのバンドルの任意の JavaScript コード (クライアント側のコントローラまたはレンダラなど) からコールできます。ヘルパー関数の形状は、クライアント側のコントローラ関数と似ており、名前-値ペアの対応付けが含まれる JSON オブジェクトであることを示すために角括弧と中括弧で囲まれます。ヘルパー関数は、関数で要求される任意の引数 (属するコンポーネント、コールバック、またはその他のオブジェクトなど) を渡すことができます。
ヘルパーの作成
ヘルパーリソースは、コンポーネントのバンドルの一部で、<componentName>Helper.js という命名規則で自動的に結び付けられます。
開発者コンソールを使用してヘルパーを作成するには、コンポーネントのサイドバーで [HELPER (ヘルパー)] をクリックします。このヘルパーファイルは、自動的に結び付けられるコンポーネントの範囲で有効です。
レンダラでのヘルパーの使用
helper 引数をレンダラ関数に追加して、レンダラ関数でヘルパーを使用できるようにします。レンダラで、関数の署名のパラメータとして (component, helper) を指定し、関数からコンポーネントのヘルパーにアクセスできるようにします。これらは標準パラメータで、関数でアクセスする必要はありません。次のコード例に、レンダラの afterRender() 関数を上書きして、ヘルパーメソッドの open をコールする方法を示します。
detailsRenderer.js
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18 afterRender : function(component, helper){
19 helper.open(component, null, "new");
20 }
21})detailsHelper.js
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18 open : function(component, note, mode, sort){
19 if(mode === "new") {
20 //do something
21 }
22 // do something else, such as firing an event
23 }
24})ヘルパーメソッドを使用してレンダラをカスタマイズする例については、「DOM へのクライアント側表示」を参照してください。
コントローラでのヘルパーの使用
helper 引数をコントローラ関数に追加して、コントローラ関数でヘルパーを使用できるようにします。コントローラで (component, event, helper) を指定します。これらは標準パラメータで、関数でアクセスする必要はありません。また、createExpense: function(component, expense){...} などのインスタンス変数をパラメータとして渡すこともできます。ここで、expense は、コンポーネントで定義された変数です。
次のコードに、カスタムイベントハンドラで使用できる updateItem ヘルパー関数をコントローラでコールする方法を示します。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18 newItemEvent: function(component, event, helper) {
19 helper.updateItem(component, event.getParam("item"));
20 }
21})ヘルパー関数はコンポーネントに対してローカルであり、コードの再利用が促進され、クライアント側のコントローラの JavaScript ロジックの複雑な作業が軽減されます (可能な場合)。次のコードに、コントローラで設定された value パラメータを item 引数を使用して取得するヘルパー関数を示します。このコードは、サーバ側のアクションをコールし、コールバックを返しますが、ヘルパー関数で他の処理を行うこともできます。
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18 updateItem : function(component, item, callback) {
19 //Update the items via a server-side action
20 var action = component.get("c.saveItem");
21 action.setParams({"item" : item});
22 //Set any optional callback and enqueue the action
23 if (callback) {
24 action.setCallback(this, callback);
25 }
26 $A.enqueueAction(action);
27 }
28})