Lightning コンポーネント開発者ガイド
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
表示ライフサイクル中に起動されたイベント
コンポーネントのライフサイクルは、クライアントが HTTP 要求をサーバに送信し、コンポーネント設定データがクライアントに返されると開始します。以前の要求によってコンポーネント定義がすでにクライアント側にあり、コンポーネントにサーバとの連動関係がない場合は、このサーバとの往復のやりとりは行われません。
クライアントの表示ライフサイクルに進む前に、コンポーネント要求のサーバ側およびクライアント側処理について簡単に理解しておくと役立ちます。フレームワークは、インターフェース、コントローラ、アクションの定義を含む、コンポーネント定義とそのすべての連動関係をサーバに作成します。コンポーネントインスタンスが作成されると、逐次化されたコンポーネント定義とインスタンスがクライアントに送信されます。定義はキャッシュされますが、インスタンスデータはキャッシュされません。
クライアントは、応答の逐次化を解除して JavaScript オブジェクトまたは対応付けを作成します。その結果、コンポーネントインスタンスの表示に使用するインスタンスツリーが作成されます。クライアントはコンポーネントのバンドル内のカスタムレンダラを検索するか、デフォルトのレンダラメソッドを使用します。
次の図は、コンポーネント定義とインスタンスの逐次化が解除された後のクライアントでのコンポーネントの典型的な表示ライフサイクルを表しています。
- init イベントは、コンポーネントを構成するコンポーネントサービスによって起動され、初期化が完了したこと通知します。
init ハンドラをカスタマイズして、独自のコントローラロジックを追加できます。詳細は、「コンポーネントの初期化時のアクションの呼び出し」を参照してください。
1swfobject.registerObject("clippy.codeblock-0", "9");<aura:handler name="init" value="{!this}" action="{!.c.doInit}"/> - render() がコールされて、コンポーネントの表示が開始されます。aura:component のレンダラには render() という基本実装がありますが、ユーザのコンポーネントはカスタムレンダラでこのメソッドを上書きできます。詳細は、「DOM へのクライアント側表示」を参照してください。
- afterRender() は、これらのコンポーネント定義のそれぞれについてコールされ、表示が完了したことを通知します。これにより、フレームワークの表示サービスが DOM 要素を挿入した後、DOM ツリーを操作できます。
- クライアントがサーバ要求 XHR への応答の待機を終了したことを示すために、doneWaiting イベントが起動されます。このイベントは、クライアント側コントローラアクションに結び付けられたハンドラを追加することで処理できます。
- フレームワークは、再表示が必要なコンポーネントがあるかどうか確認し、属性値の更新を反映する場合など、「汚れた」 (更新が必要な) コンポーネントがあれば再表示します。最後に、doneRendering イベントが表示ライフサイクルの終了時に起動されます。
1swfobject.registerObject("clippy.codeblock-1", "9");<!-- The uiExamples:buttonExample container component -->
2<aura:component>
3 <aura:attribute name="num" type="Integer" default="0"/>
4 <ui:button aura:id="button" label="{!v.num}" press="{!c.update}"/>
5</aura:component>1swfobject.registerObject("clippy.codeblock-2", "9");/** Client-side Controller **/
2({
3 update : function(cmp, evt) {
4 cmp.set("v.num", cmp.get("v.num")+1);
5 }
6})| コンポーネント | 説明 |
|---|---|
| uiExamples:buttonExample | ui:button コンポーネントが含まれる最上位コンポーネント |
| ui:button | 最上位コンポーネントに含まれる ui:button コンポーネント |
| aura:html | <button> タグを表示します。 |
| aura:if | ui:button の最初の aura:if タグ。ボタンには画像が含まれていないため、何も表示されません。 |
| aura:if | ui:button の 2 つ目の aura:if タグ |
| aura:html | <button> タグにネストされた、ボタンの表示ラベル用の <span> タグ |
| aura:expression | v.num 式 |
| aura:expression | 空の v.body 式 |
この例では、表示が完了すると、これらのコンポーネント定義について afterRender() が 8 回コールされます。doneWaiting イベントが起動され、その後に doneRendering イベントが起動されます。
ボタンをクリックするとその表示ラベルが更新され、更新が必要なコンポーネントがチェックされます。rerender() が起動されて、それらのコンポーネントが再表示され、その後に doneRendering イベントが起動されます。この例では、rerender() が 8 回コールされます。変更された値はすべて表示サービスのリストに保存され、更新が必要なコンポーネントがあれば再表示されます。
ネストされたコンポーネントの表示
myApp.app というアプリケーションに ui:myCmp コンポーネントが含まれ、そのコンポーネントに ui:button コンポーネントが含まれるとします。
初期化中、init() イベントは、ui:myCmp、ui:button、myApp.app の順序で起動されます。doneWaiting イベントが同じ順序で起動されます。最後に、doneRendering イベントも同じ順序で起動されます。
doneWaiting ハンドラのカスタマイズ
1swfobject.registerObject("clippy.codeblock-3", "9");<aura:handler event="aura:waiting" action="{!c.waiting}"/>
2<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>1swfobject.registerObject("clippy.codeblock-4", "9");({
2 waiting: function(cmp, event, helper) {
3 $A.util.addClass(cmp.find("spinner").getElement(), "waiting");
4 },
5 doneWaiting: function(cmp, event, helper) {
6 $A.util.removeClass(cmp.find("spinner").getElement(), "waiting");
7 }
8})doneRendering ハンドラのカスタマイズ
1swfobject.registerObject("clippy.codeblock-5", "9");<aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>1swfobject.registerObject("clippy.codeblock-6", "9");<aura:attribute name="isDoneRendering" type="Boolean" default="false"/>1swfobject.registerObject("clippy.codeblock-7", "9");({
2 doneRendering: function(cmp, event, helper) {
3 if(!cmp.get("v.isDoneRendering")){
4 //do something after app is first rendered
5 }
6 }
7})