この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

DOM へのクライアント側表示

このフレームワークの表示サービスでは、メモリ内のコンポーネントの状態を取得し、ドキュメントオブジェクトモデル (DOM) のコンポーネントを更新します。

DOM は、HTML および XML ドキュメントのオブジェクトを表したり、操作したりする、言語に依存しないモデルです。コンポーネントの表示はフレームワークによって自動的に行われるため、コンポーネントのデフォルトの表示動作をカスタマイズする必要がなければ、表示に関して詳細に把握する必要はありません。

レンダラの外部で DOM を変更しないでください。ただし、レンダラの外部で DOM を読み取ることはできます。

表示ライフサイクル

表示ライフサイクルにより、基盤となるデータが変更されたときにコンポーネントの表示および再表示が自動的に処理されます。次に、表示ライフサイクルの概要を示します。

ブラウザイベントによって 1 つの以上の Lightning イベントがトリガされます。
各 Lightning イベントによって、データを更新できる 1 つ以上のアクションがトリガされます。更新されたデータで複数のイベントが起動される場合もあります。
表示サービスによって、起動されたイベントのスタックが追跡されます。
イベントでのデータ更新がすべて処理されると、フレームワークによって、更新されたデータを所有するすべてのコンポーネントが表示されます。

詳細は、「表示ライフサイクル中に起動されたイベント」を参照してください。

基本コンポーネントの表示

フレームワークの基本コンポーネントは aura:component です。どのコンポーネントもこの基本コンポーネントを拡張します。

aura:component のレンダラは、componentRenderer.js にあります。このレンダラには、render()、rerender()、afterRender()、unrender() 関数の基本実装があります。フレームワークでは、これらの関数が表示ライフサイクルの一部としてコールされます。このトピックでは、これらについて詳細に説明します。基本表示関数は、カスタムレンダラで上書きできます。

新しいコンポーネントを作成すると、フレームワークによって init イベントが起動されます。これにより、コンポーネントを構築してから表示するまでの間にコンポーネントを更新したり、イベントを起動したりできます。デフォルトのレンダラである render() では、コンポーネントのボディを取得し、表示サービスを使用して表示します。

メモ

レンダラの作成

通常、カスタムレンダラを作成する必要はありませんが、表示動作をカスタマイズする場合は、コンポーネントのバンドルにクライアント側のレンダラを作成できます。レンダラファイルは、コンポーネントのバンドルの一部で、<componentName>Renderer.js という命名規則に従っていれば自動的に結び付けられます。たとえば、sample.cmp のレンダラ名は sampleRenderer.js の形式になります。

コンポーネントの表示のカスタマイズ

表示をカスタマイズするには、コンポーネントのレンダラで render() 関数を作成して、基本 render() 関数を上書きします。これにより、DOM が更新されます。

通常、render() 関数では、DOM ノードや DOM ノードの配列が返されるか、何も返されません。HTML の基本コンポーネントでは、コンポーネントを表示するときに DOM ノードが必要になります。

通常、カスタム表示コードを追加する前に render() 関数から superRender() をコールして、デフォルトの表示を拡張します。superRender() をコールすると、マークアップで指定された DOM ノードが作成されます。

表示をカスタマイズする場合、次のガイドラインが非常に重要です。

レンダラでは、コンポーネントの一部である DOM 要素のみを変更してください。親コンポーネントからアクセスする場合でも、別のコンポーネントにアクセスしてその DOM 要素を変更すると、コンポーネントのカプセル化が壊れるため、このような行為は避けてください。
レンダラでイベントを起動しないでください。��わりに init イベントを使用できます。

メモ

コンポーネントの再表示

イベントが起動されると、影響を受けるコンポーネントでデータを変更して rerender() をコールするアクションがトリガされます。rerender() 関数では、最後の表示以降の他のコンポーネントに対する更新に基づいて、そのコンポーネント自体を更新できます。この関数では、値は返されません。

コンポーネントのデータを更新すると、フレームワークによって自動的に rerender() がコールされます。データを更新していないが、コンポーネントを再表示する場合は、rerender() を明示的にコールします。

通常、カスタム再表示コードを追加する前に renderer() 関数から superRerender() をコールして、デフォルトの再表示を拡張します。superRerender() をコールすると、body 属性のコンポーネントに再表示がチェーニングされます。

表示後の DOM へのアクセス

フレームワークの表示サービスによって DOM 要素が挿入されたら、afterRender() 関数で DOM ツリーを操作できます。表示ライフサイクルで最後のコールは必要ありません。render() の後にコールされるだけで、値は返されません。

通常、カスタムコードを追加する前に superAfterRender() 関数をコールして、表示の後にデフォルトを拡張します。

コンポーネントの非表示

基本 unrender() 関数では、コンポーネントの render() 関数によって表示されているすべての DOM ノードが削除されます。この関数は、コンポーネントが破棄されると、フレームワークによってコールされます。この動作をカスタマイズするには、コンポーネントのレンダラで unrender() を上書きします。これは、フレームワークに対してネイティブでないサードパーティライブラリを操作している場合に便利です。

通常、カスタムコードを追加する前に unrender() 関数から superUnrender() をコールして、デフォルトの非表示を拡張します。

表示の例

ボタンコンポーネントを見て、基本的な表示動作をカスタマイズする方法を確認しましょう。マークアップの各タグ (標準 HTML タグを含む) に基盤となるコンポーネント表現があることを理解しておくことが重要です。この基盤のコンポーネント表現があるため、フレームワークの表示サービスでは、作成する標準 HTML タグまたはカスタムコンポーネントが同じプロセスを使用して表示されます。

ui:button のソースを表示します。ボタンコンポーネントには、Boolean でコンポーネントの無効化の状況を追跡する disabled 属性があります。

1<aura:attribute name="disabled" type="Boolean" default="false"/>

button.cmp では、onclick は {!c.press} に設定されます。

ボタンコンポーネントのレンダラは、buttonRenderer.js です。ボタンコンポーネントにより、デフォルトの render() 関数が上書きされます。

1render : function(cmp, helper) {
2    var ret = this.superRender();
3    helper.updateDisabled(cmp);
4    return ret;
5},

最初の行で superRender() 関数がコールされ、デフォルトの表示動作が呼び出されます。helper.updateDisabled(cmp) コールにより、ヘルパー関数が呼び出され、表示がカスタマイズされます。

buttonHelper.js の updateDisabled(cmp) 関数を見ていきましょう。

1updateDisabled: function(cmp) {
2    if (cmp.get("v.disabled")) {
3        var disabled = $A.util.getBooleanValue(cmp.get("v.disabled")); 
4        var button = cmp.find("button");
5        if (button) {
6            var element = button.getElement();
7            if (element) {
8                if (disabled) {
9                    element.setAttribute('disabled', 'disabled');
10                } else {
11                    element.removeAttribute('disabled');
12                }
13            }
14        }
15    }
16}

updateDisabled(cmp) 関数では、Boolean disabled 値が HTML で想定される値に変換されます。ここでは、属性は存在していないか、disabled に設定されます。

cmp.find("button") を使用して、一意のコンポーネントを取得します。button.cmp では、aura:id="button" を使用して、コンポーネントを一意に識別します。button.getElement() は、DOM 要素を返します。

buttonRenderer.js の rerender() 関数は、render() 関数に非常に似ています。この関数で、updateDisabled(cmp) もコールします。

1rerender : function(cmp, helper){
2    this.superRerender();
3    helper.updateDisabled(cmp);
4}

コンポーネントの表示は、フレームワークのライフサイクルの一部ですが、他の概念よりも若干説明しづらい概念です。コンポーネントのデフォルトの表示動作をカスタマイズする必要がなければ、この概念について考える必要はありません。

Lightning コンポーネント開発者ガイド