コンポーネントの動的な作成
構文は次のとおりです。
- type — 作成するコンポーネントの種類 ("ui:button" など)。
- attributes — コンポーネントの属性の対応付け。ローカル ID (aura:id) を含みます。
- callback — コンポーネントの作成後に呼び出すコールバック。新しいコンポーネントがパラメータとしてコールバックに渡されます。
動的に作成されたボタンを次のサンプルコンポーネントに追加してみましょう。
クライアント側のコントローラは、$A.createComponent() をコールして、press イベントのローカル ID とハンドラを含むボタンを作成します。c:createComponent の body にボタンが追加されます。
ネストしたコンポーネントの作成
別のコンポーネントのボディにコンポーネントを動的に作成する��は、$A.createComponents() を使用してコンポーネントを作成します。関数コールバックで、外部コンポーネントの body に内部コンポーネントを設定して、コンポーネントをネストします。次の例では、ui:message コンポーネントの body に ui:outputText コンポーネントを作成します。
動的に作成されたコンポーネントの廃棄
マークアップで宣言されたコンポーネントが使用されなくなると、フレームワークで自動的に廃棄され、メモリが解放されます。
コンポーネントが JavaScript で動的に作成され、そのコンポーネントがファセット (v.body または Aura.Component[] 種別の他の属性) に追加されていない場合は、メモリリークを回避するために、Component.destroy() を使用して手動で廃棄する必要があります。
サーバとの往復の回避
createComponent() メソッドおよび createComponents() メソッドでは、クライアント側のコンポーネントの作成とサーバ側のコンポーネントの作成の両方がサポートされています。サーバ側の連動関係が見つからない場合、メソッドはクライアント側で実行されます。
コントローラアクションがコールされるのはコンポーネントが作成された後のみであるため、コンポーネントの作成では、サーバ側のコントローラはサーバ側の連動関係にはなりません。
サーバ側の連動関係があるコンポーネントは、そのサーバで作成されます。サーバ側の連動関係がなく、連動関係の事前の読み込みまたは宣言によってその定義がすでにクライアントに存在している場合、サーバコールは実行されません。
このフレームワークでは、コンポーネントなどの定義間の連動関係が自動的に追跡されます。ただし、フレームワークで簡単に検出できない連動関係もあります。たとえば、コンポーネントのマークアップで直接参照されていないコンポーネントを動的に作成する場合などがこれに該当します。こうした動的な連動関係をフレームワークが把握できるようにするには、<aura:dependency> タグを使用します。これにより、必要に応じてコンポーネントとその連動関係がクライアントに送信されます。
コンポーネントの作成にサーバ要求が必要かどうかは、最上位コンポーネントで判別されます。