コンポーネントのサイドローディング component-sideloading

概要 overview

Communities コンポーネントのサイドローディングは、web ページが、サイト訪問者が選択した内容に応じて表示される内容を動的に変更するシンプルな単一ページアプリとして設計されている場合に便利です。

これは、コミュニティコンポーネントがページテンプレートに存在せず、代わりにサイト訪問者の選択後に動的に追加される場合に実行されます。

ソーシャルコンポーネントフレームワーク（SCF）は軽量な存在であるため、最初のページ読み込み時に存在するSCF コンポーネントのみが登録されます。 ページ読み込み後に動的に追加されたSCF コンポーネントを登録するには、SCFを呼び出してコンポーネントを「サイドロード」する必要があります。

ページがCommunities コンポーネントをサイドロードするように設計されている場合は、ページ全体をキャッシュできます。

SCF コンポーネントを動的に追加する手順は次のとおりです。

DOMにコンポーネントを動的に追加 dynamically-add-component-to-dom

コンポーネントが動的に組み込まれるか、動的に読み込まれるかにかかわらず、最初にDOMに追加する必要があります。

SCF コンポーネントを追加する場合、最も一般的なタグはDIV タグですが、他のタグも使用できます。 SCFは、ページが最初に読み込まれたときにのみDOMを調べるので、SCFが明示的に呼び出されるまで、DOMへのこの追加は無視されます。

どのタグを使用しても、少なくとも、要素は次の2つの属性を含むことで、通常のSCF ルート要素パターンに準拠している必要があります。

追加されたコメントコンポーネントの例を次に示します。

<div
    class="scf-commentsystem scf translation-commentsystem"
    data-component-id="<%= currentPage.getPath()%>/jcr:content/content-left/comments"
    data-scf-component="social/commons/components/hbs/comments"
>
</div>

SCFの呼び出しによるサイドロード sideload-by-invoking-scf

動的インクルージョン dynamic-inclusion

動的インクルージョンでは、ブートストラップリクエストを使用します。この結果、SCFはDOMを調べ、ページに見つかったすべてのSCF コンポーネントをブートストラップします。

ページ読み込み後にいつでもSCF コンポーネントを初期化するには、次のようなJQuery イベントを起動するだけです。

$(document).trigger(SCF.events.BOOTSTRAP_REQUEST);

動的ロード dynamic-loading

動的な読み込みでは、SCF コンポーネントの読み込みを制御できます。

DOM内にあるすべてのSCF コンポーネントをブートストラップする代わりに、次のJavaScript メソッドを使用して読み込む特定のSCF コンポーネントを指定できます。

SCF.addComponent(document.getElementById(*someId*));

ここで、someIdはdata-component-id属性の値です。