Require.js與jQueryMobile-路由器

Question

我加載require.js用jQuery包括像這樣我的html：

<script data-main="requires" src="lib/require-jquery.js"></script> 

我requires.js的內容：

require.config({ 
     paths: { 
      "jquery.mobile": "lib/jquery.mobile", 
      "jquery.mobile.router": "lib/jquery.mobile.router" 

     }, 
     shim: { 
      "jquery.mobile" : { 
       "exports": "$.mobile" 
      }, 
      "jquery.mobile.router": { 
        "deps": [ "jquery.mobile" ], 
        "exports": "$.mobile.Router" 
      } 

     } 

}); 

require(["jquery.mobile.router" ], function() { 
    require(["router"]); 
}); 

而且在我的路由器.js文件我創建了jquery mobile router plugin的新實例：

router = new $.mobile.Router(...); 

這給了我這個錯誤：

Uncaught TypeError: undefined is not a function

當我輸出$和$ .mobile時，它們都被定義了，只是$ .mobile.Router是未定義的。

我在這裏做了什麼錯？

Answer 1

我的問題是，我加入jquery.mobile作爲jquery.mobile.router依賴性，從而jQuery的移動將首先被加載，其中作爲用於路由器狀態的文檔這樣的：

The jQuery Mobile router javascript file must be loaded before jQuery Mobile.

這是我如何改變了我的requires.js來解決這個問題：

require.config({ 

    paths: { 
     "jquery.mobile": "lib/jquery.mobile", 
     "jquery.mobile.router": "lib/jquery.mobile.router" 
    }, 

    shim: { 
     "router": { 
      "deps" : ["jquery.mobile"] 
     }, 
     "jquery.mobile" : { 
      "deps" : [ "jquery.mobile.router"], 
      "exports": "$.mobile" 
     }, 

     "jquery.mobile.router": { 
      "exports": "$.mobile.Router" 
     } 
    } 
}); 

require(["router"]); 

現在我只需要我的router.js和負載jquery.mobile和jquery.mobile.router的依賴關係。加載順序現在是這樣的：

1. jquery.mobile.router
2. jquery.mobile
3. 路由器

Answer 2

在router.js文件試試這個： -

define(["jquery", "jquery.mobile.router"], function($) { 
    // your js code in router.js 
}); 

通過在您的定義呼叫指定jquery和$作爲參數傳遞，jQuery對象$和jquery.mobile.router定義的相關功能現在在提供您的代碼範圍（包含在文件router.js中）。