AUIスクリプトを使用したモジュールのロード
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
aui:script
タグは、ページ上のスクリプトタグにJavaScriptをロードするJSPタグであり、特定のリソースが実行前に確実にロードされるようにします。
aui:scriptを使用する
aui:script
タグは、次のオプションをサポートしています。
require
: Liferay AMD Module LoaderロードするにはAMDモジュールが必要です。use
:YUIローダーを介してロードされるAlloyUI / YUIモジュールを使用します。位置
:スクリプトタグがページに配置される位置。 可能なオプションはインライン
またはauto
です。サンドボックス
:匿名関数でスクリプトタグをラップするかどうか。設定した場合、
に加えて、ラッピングに加えて、jQueryとアンダースコアに$
と_
が定義されます。
次に、ES2015および Metal.js モジュールをロードする方法を学習できます。
ES2015およびMetal.jsモジュールのロード
aui:script
を使用して、次のようにES2015およびMetal.jsモジュールをロードできます。
<aui:script require="metal-clipboard/src/Clipboard">
new metalClipboardSrcClipboard.default();
</aui:script>
または、次の例に示すように、モジュール名の後にvariableName として `を追加して、モジュールの変数を指定できます。
new myModule.default();
`
これにより、登録された Clipboard.js
の依存関係が解決され、すべての依存関係が満たされ、要求されたモジュールが安全に実行できるようになるまで順番にロードされます。
ブラウザでは、 aui:script
以下に示す完全なHTMLに変換されます。
<script type="text/javascript">
Liferay.Loader.require("metal-clipboard/src/Clipboard",
function(metalClipboardSrcClipboard) {
(function() {
new metalClipboardSrcClipboard.default();
})()
}, function(error) {
console.error(error)
});
</script>
次に、AlloyUIモジュールをロードする方法を学習できます。
AlloyUIモジュールのロード
使用
属性を使用してAlloyUI / YUIモジュールをロードできます。
<aui:script use="aui-base">
A.one('#someNodeId').on(
'click',
function(event) {
alert('Thank you for clicking.')
}
);
</aui:script>
これにより、 aui-base
AlloyUIコンポーネントがロードされ、 aui:script
内のコードで使用できるようになります。
ブラウザでは、 aui:script
以下に示す完全なHTMLに変換されます。
<script type="text/javascript">
AUI().use("aui-base",
function(A){
A.one('#someNodeId').on(
'click',
function(event) {
alert('Thank you for clicking.')
}
);
}
);
</script>
次に、AlloyUIモジュールとES2015およびMetal.jsモジュールをロードする方法を学習できます。
AlloyUIモジュールとES2015およびMetal.jsモジュールを一緒にロードする
aui:script
ES2015モジュールまたはMetal.jsモジュールとともにAUIモジュールをロードすることもできます。 aui:script
タグは、同じ構成で が
と が
属性を使用することをサポートしていません。 でも心配しないで。 aui:script
’s require
属性を使用してES2015およびMetal.jsモジュールをロードし、スクリプト内で AUI()。use()
関数を使用してAUIモジュールをロードできます。 以下に設定例を示します。
<aui:script require="path-to/metal/module">
AUI().use(
'liferay-aui-module',
function(A) {
let var = pathToMetalModule.default;
}
);
</aui:script>
これで、 aui:script
tag \を使用してモジュールをロードする方法がわかりました。