1

これが私のウェブサイトのセットアップです：

索引.html

<!DOCTYPE html>
<html>
    <head>
        <script>
            var require = {
                paths : {
                    jQuery : "jquery-1.7.2.min"
                },
                baseUrl: "/scripts"
            };
        </script>
        <title>Javascript RequireJS Example</title>
    </head>
    <body>
        <div id="test"></div>
        <script src="scripts/require.js" type="text/javascript" data-main="main.js"></script>
    </body>
</html>

hello-wired-spec.js

define({
    message: "I haz been wired",
    node : "#test",

    helloWired: {
        create: {
            module: 'hello-wired'
        },
        ready: {
            sayHello: [{ $ref : 'node' }, { $ref : "message" }]
        }
    },

    plugins: [
        { module: 'debug', trace: true }
    ]
});

hello-wired.js

define(["jQuery"], function() {
    function HelloWired() {}

    HelloWired.prototype = {
        sayHello: function(node, message) {
            $(node).html("Hello! " + message);
        }
    };

    return HelloWired;
});

main.js

require(["wire!hello-wired-spec", "jQuery"], function (spec) {
    console.log(spec);
});

私はRequire.jsandを使用wire.jsして、単純な IoC プロトタイプ Web サイトを作成しています。私の問題は、index.html ページを読み込むと、ブラウザーのコンソールに次のように表示されることです。

DEBUG (total: 1ms, context: 0ms / 0ms): Context init
---------------------------------------------------

WIRING: No progress in 5000ms, status:
     checkPaths()

logger.error(tag + ': No progress in ' + timeout + 'ms, status:');

---------------------------------------------------

Components that DID NOT finish wiring

plugins[]: created
   Object { module= "debug" , trace= true , id= "plugins[]" }

helloWired: created
   Object { create={...}, ready={...}, id="helloWired"}
---------------------------------------------------

何かを見逃したようですが、ここで何をすべきかわかりません。誰か助けてくれませんか？

編集Scripts私のサイトのフォルダーは次のとおりです。

私のウェブサイトの Scripts フォルダ

EDIT OK プロジェクト構造を少し変更し、HTML ページを次のように変更しました。

<!DOCTYPE html>
<html>
    <head>
        <script>
            var require = {
                paths : {
                    jquery : "jquery-1.7.2.min",
                    wire : "wire/wire"
                },
                baseUrl: "/scripts",
                packages: [
                    { name: 'wire', location: 'wire', main: 'wire' },
                    { name: 'when', location: 'when', main: 'when' },
                    { name: 'aop', location: 'aop', main: 'aop' }
                ]
            };
        </script>
        <title>Javascript RequireJS Example</title>
    </head>
    <body>
        <div id="test"></div>
        <script src="scripts/require.js" type="text/javascript" data-main="main.js"></script>
    </body>
</html>

ここに画像の説明を入力

以前は 404 を取得していませんでしたが、「パッケージ」構成セクションもありませんでした。HTML を変更した後に 404 が発生しましたが、/jsファイルを予想される場所に配置することで修正しました。このすべての後、私はまだ同じエラーを受け取ります：

ここに画像の説明を入力

4

2 に答える 2

1

問題はjQueryの大文字化です。独自の名前を定義するモジュール（jQueryなど）を使用する場合は、パス構成などでまったく同じ名前を使用する必要があります。jQueryは、それ自体を「jQuery」ではなく「jquery」と名付けます。

コード内のすべての場所で「jQuery」を「jquery」に変更します。

また、ブライアンが言ったことは真実です。次のように、モジュールでローカルjqueryインスタンスを使用する必要があります。

define(["jquery"], function ($) { /* use $ here */ });

これにより、グローバルへの依存が減り、複数のバージョンのjqueryを同時に使用できるようになります。

于 2012-07-19T20:09:51.517 に答える