Lightning コンポーネント開発者ガイド
jコンポーネントの動的な作成
$A.createComponent() メソッドを使用して、クライアント側の JavaScript コードでコンポーネントを動的に作成します。
構文は次のとおりです。
1createComponent(String type, Object attributes, function callback)- type — 作成するコンポーネントの種類 ("ui:button" など)。
- attributes — コンポーネントの属性の対応付け。
- callback — コンポーネントの作成後に呼び出すコールバック。新しいコンポーネントがパラメータとしてコールバックに渡されます。
すべてのパラメータについての詳細は、「リファレンスドキュメントアプリケーション」の JavaScript API リファレンスを参照してください。
動的に作成されたボタンを次のサンプルコンポーネントに追加してみましょう。
1<!--docsample:createComponent-->
2<aura:component>
3 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
4
5 <p>Dynamically created button</p>
6 {!v.body}
7
8</aura:component>クライアント側のコントローラは、$A.createComponent() をコールして、press イベントのローカル ID とハンドラを含むボタンを作成します。docsample:createComponent の body にボタンが追加されます。
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/*createComponentController.js*/
18({
19 doInit : function(cmp) {
20 $A.createComponent(
21 "ui:button",
22 {
23 "aura:Id": "findableAuraId",
24 "label": "Press Me",
25 "press": cmp.getReference("c.handlePress")
26 },
27 function(newButton){
28 //Add the new button to the body array
29 if (cmp.isValid()) {
30 var body = cmp.get("v.body");
31 body.push(newButton);
32 cmp.set("v.body", body);
33 }
34 }
35 );
36 },
37
38 handlePress : function(cmp) {
39 console.log("button pressed");
40 }
41})1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17var newbody = cmp.get("v.body");
18var newCmp = newbody[0].find("findableAuraId");ネストしたコンポーネントの作成
別のコンポーネントのボディにコンポーネントを動的に作成するには、$A.createComponents() を使用してコンポーネントを作成します。関数コールバックで、外部コンポーネントの body に内部コンポーネントを設定して、コンポーネントをネストします。次の例では、ui:message コンポーネントの body に ui:outputText コンポーネントを作成します。
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17$A.createComponents([
18 ["ui:message",{
19 "title" : "Sample Thrown Error",
20 "severity" : "error",
21 }],
22 ["ui:outputText",{
23 "value" : e.message
24 }]
25 ],
26 function(components, status){
27 if (status === "SUCCESS") {
28 var message = components[0];
29 var outputText = components[1];
30 // set the body of the ui:message to be the ui:outputText
31 message.set("v.body", outputText);
32 }
33 }
34);連動関係の宣言
このフレームワークでは、コンポーネントなどの定義間の連動関係が自動的に追跡されます。ただし、フレームワークで簡単に検出できない連動関係もあります。たとえば、コンポーネントのマークアップで直接参照されていないコンポーネントを動的に作成する場合などがこれに該当します。こうした動的な連動関係をフレームワークが把握できるようにするには、<aura:dependency> タグを使用します。これにより、必要に応じてコンポーネントとその連動関係がクライアントに送信されます。
使用方法についての詳細は、「aura:dependency」 を参照してください。
サーバ側の連動関係
createComponent() メソッドでは、クライアント側のコンポーネントの作成とサーバ側のコンポーネントの作成の両方がサポートされています。サーバ側の連動関係が見つからない場合、このメソッドは同期して実行されます。コンポーネントの作成にサーバ要求が必要かどうかは、最上位コンポーネントで判別されます。
コントローラアクションがコールされるのはコンポーネントが作成された後のみであるため、コンポーネントの作成では、サーバ側のコントローラはサーバ���の連動関係にはなりません。
サーバ側の連動関係があるコンポーネントは、事前に読み込まれている場合でも、そのサーバで作成されます。サーバ側の連動関係がなく、連動関係の事前の読み込みまたは宣言によってその定義がすでにクライアントに存在している場合、サーバコールは実行されません。サーバ要求を強制するには、forceServer パラメータを true に設定します。