AUIスクリプトを使用したモジュールのロード

AUIスクリプトを使用したモジュールのロード

ファストトラック記事は、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

aui:script タグは、ページ上のスクリプトタグにJavaScriptをロードするJSPタグであり、特定のリソースが実行前に確実にロードされるようにします。

aui:scriptを使用する

aui:script タグは、次のオプションをサポートしています。

  • requireLiferay 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:scriptES2015モジュールまたは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 \を使用してモジュールをロードする方法がわかりました。

関連トピック

外部JavaScriptライブラリの使用

AMDモジュールの読み込み

« 外部JavaScriptライブラリの使用ポートレットでのフロントエンドフレームワークの使用 »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています