4

これは私が記事から取った例で、少し変更されています。この例は完全に機能します

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
        <script type="text/javascript">
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };
        </script>   
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" type="text/javascript"></script>
        <script type="text/javascript">
            /// Require the registry, parser, Dialog, and wait for domReady
            require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                // Explicitly parse the page
                parser.parse();
                // Find the dialog
                var dialog = registry.byId("dialog");
                // Set the content equal to what dojo.config is
                dialog.set("content", "<b>it works!</b>");
                // Show the dialog
                dialog.show();
            });
        </script>
    </head>
    <body class="claro">
        <div id="dialog" data-dojo-type="dijit.Dialog"></div>
    </body>
</html>

今、私はそれを変更し、jQuery を使用して Dojo を動的にロードしたいと考えています。これが私がこれを行う方法の例です:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };

            $.getScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js")
            .done(function (script, textStatus) {
                /// Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            })
            .fail(function (jqxhr, settings, exception) {
                alert('Cannot load Dojo.js');
            });
        });
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit.Dialog">
    </div>
</body>
</html>

しかし、次のエラーが発生する原因となる何か間違ったことをしているように見えます

NotFoundError: Node was not found
http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js
Line 2

Dojo はまだ準備ができていないと思いますが、間違っているかもしれません... jQuery を使用して Dojo を動的にロードすることは可能ですか?

4

2 に答える 2

1

「ノードが見つかりませんでした」というエラーは、ローダーがそれをロードしたスクリプト タグを見つけようとしているために発生します。これは、Dojo が CDN (あなたが使用した Google のものなど) からロードされるときに、モジュールをロードするための URL パスを見つけようとするトリックです。

jQuery の $.getScript() 関数は、実際にはスクリプト タグをページに挿入するのではなく、XHR を介して読み込み、コードを評価します。したがって、Dojo が探しているタグが見つかりません。これは、CDN を使用している場合にのみ発生します。CDN ではなく Dojo の独自のローカル コピーを使用した場合は、動作させることができます。

jQuery 経由で Dojo をロードすることが良い方法かどうかはわかりません。両方を別々にロードするか、逆にロードする (つまり、Dojo 内で jQuery をロードする) 方がおそらく良いでしょう。両方の機能が必要な場合、またはこれを試していないことを前提としています。

jQuery を Dojo モジュールとしてロードするには、コードを次のように変更します。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link
        rel="stylesheet"
        href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css"
        media="screen"
    />
    <script type="text/javascript">
        var dojoConfig = {
            "parseOnLoad": false,
            "async": true,
                "packages": [{
                    "name": "jquery",
                    "location": "//ajax.googleapis.com/ajax/libs/jquery/1.9.0",
                    "main": "jquery.min"
                }]
        };
    </script>
    <script
        type="text/javascript"
        src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"
    ></script>
    <script type="text/javascript">
        define.amd.jQuery = true;  // jQuery will be loaded as an AMD module

        require([
            "jquery",
        ], function($){
            // NB: $ is only available within the scope it has been loaded
            // as it is loading as an AMD module.  Hence, $ is not globally
            // available and must be required into any scope it is used.

            $(document).ready(function () {
                require([
                    "dijit/registry",
                    "dojo/parser",
                    "dojo/json",
                    "dojo/_base/config",
                    "dijit/Dialog"
                ], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        })
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit/Dialog">
    </div>
</body>
</html>

両方を使おうとするよりも、Dojo を使い続ける方がよいでしょう。ただし、上記の場合、両方を一緒に使用できます。Dojo には、$(document).ready() を置き換えることができる独自の ready 関数 ( dojo/ready ) があります。jQuery の機能のほとんどは、Dojo 内のいくつかのマナーで複製されています。

jQuery を Dojo モジュールとしてロードするということは、require コールバック内でのみ使用できることを意味します。したがって、$ は通常のようにグローバル スコープには配置されません。必要な JavaScript にそれを要求する必要があります。

注:コード内の dijit.Dialog を dijit/Dialog に変更しました。これは、ドット形成を使用するとバージョン 1.8 で読み込まれないためです。

于 2013-02-01T11:48:26.167 に答える
0

OK、ついに記事に基づいた信頼できる解決策を見つけたようです...ここに実際の例があります：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
        function loadScript(url, callback) {
            var script = document.createElement("script")
            script.type = "text/javascript";

            if (script.readyState) {  //IE
                script.onreadystatechange = function () {
                    if (script.readyState == "loaded" ||
                    script.readyState == "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {  //Others
                script.onload = function () {
                    callback();
                };
            }

            script.src = url;
            document.body.appendChild(script);
        }

        $(document).ready(function () {
            dojoConfig = {
                parseOnLoad: false,
                async: true
            };

            loadScript("http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js", function () {
                /// Require the registry, parser, Dialog, and wait for domReady
                require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog"], function (registry, parser, JSON, config) {
                    // Explicitly parse the page
                    parser.parse();
                    // Find the dialog
                    var dialog = registry.byId("dialog");
                    // Set the content equal to what dojo.config is
                    dialog.set("content", "<b>it works!</b>");
                    // Show the dialog
                    dialog.show();
                });
            });
        });
    </script>
</head>
<body class="claro">
    <div id="dialog" data-dojo-type="dijit.Dialog">
    </div>
</body>
</html>

これは純粋な jQuery ソリューションではありませんが、Dojo スクリプトをページに含める方が良いでしょう...

于 2013-02-01T15:23:22.170 に答える