Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
j$ContentAsset
扱いにくいファイルパスや URL の代わりに名前を使用して、$ContentAsset アセットファイルを参照します。$ContentAsset では、すべてのアセットファイルの共有、バージョン設定、アクセス制御や、モバイルの最適化と画像ファイルのサイズ変更のオプションが提供されます。$ContentAsset は、Lightning コンポーネントのマークアップおよび JavaScript コントローラやヘルパーコード内で使用できます。
コンポーネントのマークアップでの $ContentAsset の使用
コンポーネントのマークアップで特定のアセットファイルを参照するには、$ContentAsset.yourNamespace__assetName を使用します。名前空間が設定されていない組織では、$ContentAsset.assetDeveloperName を使用できます。認証されたセッションのアセットなのか、認証されていないセッションのアセットなのかに関係なくこの構文を使用します。アーカイブ内のコンテンツアセットを参照するには、$ContentAsset.yourNamespace__assetName + 'pathinarchive=images/sampleImage.jpg' のように pathinarchive をパラメータとして基本構文に追加します。
いくつか例を紹介しましょう。
アーカイブアセットファイル内の画像を参照する Aura コンポーネント。
1<aura:component>
2 <img src="{!$ContentAsset.websiteImages + 'pathinarchive=images/logo.jpg'}" "alt="holiday wreath"/>
3</aura:component><ltng:require> タグを使用して、CSS スタイルシートまたは JavaScript ライブラリをコンポーネントに含めます。
アセットファイルを使用して div 要素のスタイルを設定する Aura コンポーネント。
1<aura:component>
2 <ltng:require styles="{!$ContentAsset.bookStyle}"/>
3
4 <!-- "bookName" is defined in an asset file with DeveloperName of "bookStyle" -->
5 <div id="bookTitle" class="bookName">
6 </div>
7</aura:component>Aura コンポーネントで testDisplayData JavaScript アセットファイルからのデータを表示します。
1<aura:component>
2 <ltng:require scripts="{!$ContentAsset.testDisplayData}"
3afterScriptsLoaded="{!c.displayData}"/>
4...
5
6 <aura:attribute name="TestData" type="String[]" ></aura:attribute>
7 <div>
8 <input type="text" id="sampleData" value ="{!v.TestData}" />
9 </div>
10...
11</aura:component>1({
2 displayData : function(component, event, helper) {
3 var data = _datamap.getData();
4 component.set("v.TestData", data);
5 }
6})1window._datamap = (function() {
2 var data = ["Agree", "Disagree", "Strongly Agree", "Strongly Disagree", "Not Applicable"];
3 return {
4 getData: function() {
5 return data.join(", ");
6 }
7 };
8}());