不明白爲什麼wire.js未能創建對象

的Index.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-有線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.js和wire.js寫一個簡單的IoC原型網站。我的問題是，我看到在瀏覽器的控制檯下面當我加載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 folder in my website

編輯好，我稍微改變項目結構，以及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>

enter image description here

現在我沒有得到任何404的之前，但我也沒有「軟件包」配置部分。在更改HTML後，我確實得到了一些404，但我通過將/js文件放在預期的位置來解決這些問題。這一切後，我仍然得到了同樣的錯誤：

enter image description here

來源

2012-07-19 Jason Evans

乍一看，它看起來像它可能是一個AMD裝載機配置問題。我通常會嘗試將各個庫（例如wire，when等）保存在自己的文件夾中，例如，將wire保留在wire /目錄中。然後，我爲每個設置AMD包配置。 See here for an example如何做到這一點 - 它看起來像你的一些代碼是基於我的hello-wire.js example，所以你可以嘗試在那裏模擬軟件包配置，併爲你調整目錄佈局。

你可以檢查的一件事是Firebug或WebKit中的網絡面板，以查看文件是否正在加載，或者如果有404ing。

可能是不相關的，只是一個建議：它看起來像你使用jQuery作爲一個全局而不是嚴格的AMD模塊 - 例如，它已列在您的AMD dep列表中，但不是您的AMD工廠功能的參數。這可能是最初確定的，但是您可能想要在某個時候使用完整的AMD路線。

來源

2012-07-19 16:34:47

我曾嘗試重新構造這個項目。我將發佈腳本文件夾的更新圖像。但是這並沒有阻止這個錯誤。我也會發布錯誤的圖片。現在，我需要一些睡眠:) – 2012-07-19 22:01:21

問題是jQuery的大小寫。當使用定義自己名稱的模塊（如jQuery）時，必須在路徑配置和其他地方使用完全相同的名稱。 jQuery自己命名爲「jquery」，而不是「jQuery」。

將代碼中的「jQuery」更改爲「jquery」。

另外，Brian說的是真的。您應該在模塊中使用本地jQuery的實例是這樣的：

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

這樣，可以減輕你對全局的依賴，也讓你有可能同時使用jquery的多個版本。

來源

2012-07-19 20:09:51 unscriptable

+1將套管更改爲「jquery」看起來有所幫助，因爲我現在沒有收到「$ is undefined」類型的錯誤。 – 2012-07-19 22:00:22

不明白爲什麼wire.js未能創建對象

回答

相關問題