コンポーネントのバンドル内の JavaScript コードの共有

ヘルパーの作成

ヘルパーリソースは、コンポーネントのバンドルの一部で、<componentName>Helper.js という命名規則で自動的に結び付けられます。

開発者コンソールを使用してヘルパーを作成するには、コンポーネントのサイドバーで [HELPER (ヘルパー)] をクリックします。このヘルパーファイルは、自動的に結び付けられるコンポーネントの範囲で有効です。

レンダラでのヘルパーの使用

helper 引数をレンダラ関数に追加して、レンダラ関数でヘルパーを使用できるようにします。レンダラで、関数の署名のパラメータとして (component, helper) を指定し、関数からコンポーネントのヘルパーにアクセスできるようにします。これらは標準パラメータで、関数でアクセスする必要はありません。次のコード例に、レンダラの afterRender() 関数を上書きして、ヘルパーメソッドの open をコールする方法を示します。

detailsRenderer.js

1({
2    afterRender : function(component, helper){
3        helper.open(component, null, "new");
4    }
5})

detailsHelper.js

1({
2    open : function(component, note, mode, sort){
3        if(mode === "new") {
4            //do something
5        }
6        // do something else, such as firing an event
7    }
8})

ヘルパーメソッドを使用してレンダラをカスタマイズする例については、「DOM へのクライアント側表示」を参照してください。

コントローラでのヘルパーの使用

helper 引数をコントローラ関数に追加して、コントローラ関数でヘルパーを使用できるようにします。コントローラで (component, event, helper) を指定します。これらは標準パラメータで、関数でアクセスする必要はありません。また、createExpense: function(component, expense){...} などのインスタンス変数をパラメータとして渡すこともできます。ここで、expense は、コンポーネントで定義された変数です。

次のコードに、カスタムイベントハンドラで使用できる updateItem ヘルパー関数をコントローラでコールする方法を示します。

1({
2    newItemEvent: function(component, event, helper) {
3        helper.updateItem(component, event.getParam("item"));
4    }
5})

ヘルパー関数はコンポーネントに対してローカルであり、コードの再利用が促進され、クライアント側のコントローラの JavaScript ロジックの複雑な作業が軽減されます (可能な場合)。次のコードに、コントローラで設定された value パラメータを item 引数を使用して取得するヘルパー関数を示します。このコードは、サーバ側のアクションをコールし、コールバックを返しますが、ヘルパー関数で他の処理を行うこともできます。

1({
2    updateItem : function(component, item, callback) {
3        //Update the items via a server-side action
4        var action = component.get("c.saveItem");
5        action.setParams({"item" : item});
6        //Set any optional callback and enqueue the action
7        if (callback) {
8            action.setCallback(this, callback);
9        }
10        $A.enqueueAction(action);
11    }
12})