ltng:require
連動関係の順序を維持しながら、スクリプトとスタイルシートを読み込みます。スタイルはリストの順序で読み込まれます。同じコンポーネントまたは異なるコンポーネントの複数の <ltng:require> タグでスタイルが指定されていても、スタイルが読み込まれるのは 1 回のみです。
ltng:require では、外部 CSS と JavaScript ライブラ���を静的リソースとしてアップロードした後で読み込むことができます。
1<aura:component>
2
3 <ltng:require
4
5 styles="{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}"
6
7 scripts="{!$Resource.jsLibraries + '/jsLibOne.js'}"
8
9 afterScriptsLoaded="{!c.scriptsLoaded}" />
10
11</aura:component>式で $Resource が解析される方法に予測できない動作があるため、複数の $Resource 参照を 1 つの属性に含めるには join 演算子を使用します。たとえば、コンポーネントに追加する JavaScript ライブラリが複数ある場合、scripts 属性は次のようにする必要があります。
1scripts="{!join(',',
2
3 $Resource.jsLibraries + '/jsLibOne.js',
4
5 $Resource.jsLibraries + '/jsLibTwo.js')}"リソースのカンマ区切りリストは、scripts および styles 属性に入力された順序で読み込まれます。スクリプトが読み込まれると、クライアント側コントローラの afterScriptsLoaded ��クションがコールされます。カプセル化および再利用を確実に行うには、CSS または JavaScript ライブラリを使用する .cmp または .app リソースのそれぞれに <ltng:require> タグを追加します。
同じコンポーネントまたは異なるコンポーネントの複数の <ltng:require> タグでリソースが指定されていても、リソースが読み込まれるのは 1 回のみです。
属性
| 属性名 | 属性型 | 説明 | 必須項目 |
|---|---|---|---|
| body | Component[] | コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。 | |
| scripts | String [] | 読み込まれる連動関係の順序で表示したスクリプトのセット。 | |
| styles | String [] | 読み込まれる連動関係の順序で示したスタイルシートのセット。 |
イベント
| イベント名 | イベントタイプ | 説明 |
|---|---|---|
| afterScriptsLoaded | COMPONENT | ltng:require.scripts にリストされたすべてのスクリプトが ltng:require で読み込まれると起動します。 |
| beforeLoadingResources | COMPONENT | ltng:require でリソースの読み込みが開始される前に起動します。 |