2011-11-17 27 views
15

我試圖實現一個極端的基本測試,使用jquery,underscore.js和backbone.js加載通過require.js和由於某種原因,我似乎無法讓一切正常排列。研究表明,其他人沒有這些相同的問題,所以我知道它一定是簡單的,我只是沒有看到。通過Require.js問題非常基本的骨幹/下劃線驅動我batty

我遇到的問題是,當backbone.js加載時,它無法找到對_的引用。我發現其他人報告了同樣的問題,但問題通常是將錯誤順序或其他明顯問題的依賴關係引用傳遞給處理程序。骨幹網正在加載時發生這種情況。

我也看到了一些'機械'解決方案,比如'將所有內容放在同一個文件中',只是通過使用一些腳本以正確的順序包含傳統方式來加載它們,但我真的很想因爲它似乎是一個如此強大的方法。

最初我從這裏的結構http://backbonetutorials.com/organizing-backbone-using-modules/開始,它在演示中工作,但感覺有點脆弱,因爲當我試圖做出非常簡單的修改或從頭開始構建一個簡單的示例時,它會中斷。

打我的頭這太長了,我回去了,發現這個網頁 Loading Backbone and Underscore using RequireJS 另一個簡單的例子,我希望恢復。然而,在建立一個基於它的新測試之後,即使骨幹的0.5.3-optamd分支應該處理它自己對下劃線的依賴關係,我仍然會收到同樣的問題。

不用再說了,這裏是超級直接的代碼,應該可以工作,但卻讓我瘋了。在這裏我們希望這件事情很明顯我只是錯過莫名其妙:

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Backbone.js/Underscore.js via Require.js Learning Page</title> 
     <script src="js/libs/require/require.js"></script> 
     <script src="js/main.js"></script> 
    </head> 
    <body> 
     <div>Backbone.js/Underscore.js via Require.js Learning Page</div> 
     <div class="testhook"></div> 
    </body> 
</html> 

的js/main.js

require.config({ 
    paths: { 
      'jquery': 'libs/jquery/1.7/jquery', 
      'underscore': 'libs/underscore/1.2.2/underscore', 
      'backbone': 'libs/backbone/0.5.3-optamd/backbone' 
    }, 
    baseUrl: '/js', 
    urlArgs: 'v=1.0' 
}); 

require([ 
     'domReady', 
     'app' 
     ], 
     function(domReady, App){ 
      domReady(function(){ 
       console.log('Dom is ready'); 
       App.init(); 
      }); 
     } 
); 

的js/app.js

// Filename: app.js 
define([ 
     'jquery', 
     'underscore', 
     'backbone' 
     ], 
     function($, _, Backbone){ 

      var init = function(){ 

       console.log('app.js > init()'); 

       // jquery test (WORKS) 
       $('.testhook').append('testhook append'); 

       // underscore test (WORKS) 
       console.log(_.map([1, 2, 3], function(n){ return n * 2; })); 

       // backbone test (DIES) 
       var artist = new Backbone.Model({ 
         firstName: "Wassily", 
         lastName: "Kandinsky" 
        }); 

        artist.set({birthday: "December 16, 1866"}); 

        console.log(JSON.stringify(artist)); 
      } 

      return { init: init }; 
     } 
); 

確切控制檯輸出是:

Uncaught TypeError: Cannot call method 'extend' of undefined (backbone.js:150) 
main.js:18 Dom is ready 
app.js:11  app.js > init() 
app.js:17  [2, 4, 6] 
app.js:20  Uncaught TypeError: Cannot read property 'Model' of null (app.js:20) 

NOTE: 
Line 150 in unminified backbone.js is: 
_.extend(Backbone.Model.prototype, Backbone.Events, { 

我在使用Chrome 17.0.938.0 dev-m的Windows 7機器上。

我的腳本版本是:

backbone:  0.5.3-optand 
jquery:   1.7 
require:  1.0.1 
underscore:  1.2.2 

我的目錄結構是:

js 
+-- libs/ 
¦  +-- backbone/ 
¦  ¦  +-- 0.5.3-optamd/ 
¦  ¦     +-- backbone.js 
¦  +-- jquery/ 
¦  ¦  +-- 1.7/ 
¦  ¦   +-- jquery.js 
¦  +-- require/ 
¦  ¦  +-- require.js 
¦  +-- underscore/ 
¦    +-- 1.2.2/ 
¦     +-- underscore.js 
+-- app.js 
+-- domReady.js 
+-- main.js 
+-- order.js 
index.html 

我不能相信這是多麼困難,給我和我真的希望有人能揭示一些輕什麼heck正在這裏。

+0

你的榜樣爲我工作100%。你使用了什麼確切的Backbone版本? optamd或optamd3? – Riebel

回答

20

我實際上花了很多時間來解決這個問題!

以下是我已經成功地得到它的工作...

首先,使用jQuery 1.7下載新的樣本需要JS的項目。在zip文件中,您會找到一個名爲require-jquery.js的文件,其中包含jQuery 1。7現在是AMD兼容的。

然後下載最新版本的需要,現在也是AMD,而去年,試試這個版本的骨幹......

https://github.com/jrburke/backbone/blob/optamd/backbone.js

伯克創造了這一關骨幹叉子和製作AMD兼容版本。

則...
的index.htm

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Google Analytics API Browser</title> 
     <!-- This is a special version of jQuery with RequireJS built-in --> 
     <script data-main="main" src="require-jquery.js"></script> 
    </head> 
    <body> 

    </body> 
</html> 

main.js

require(['jquery','order!libs/underscore-min','order!libs/backbone','order!scripts/app'], 
function($,_,Backbone,app){ 
    app.init(); 
}); 

app.js

define(['jquery','backbone','scripts/home'], function($, Backbone, router){ 
    var init = function(){ 
     console.log("Started"); 
      // In here you can load your routers/views/whatever 
    }; 

    return { init: init}; 
}); 

我的文件結構看起來像
/應用/ index.htm
/app/require-jquery.js
/app/order.js
/app/main.js
/app/text.js
/app/scripts/app.js
/應用/腳本/ home.js
/app/lib/underscore-min.js
/app/lib/backbone.js

讓我知道是否有幫助,打我在twitter上@ jcreamer898如果你需要一些更多的幫助,我真的在做同樣的事情!

UPDATE我最近創建了Github上2 GitHub的項目,一個實際的應用程序,而另一個只是一個簡單的入門...

https://github.com/jcreamer898/Savefavs
https://github.com/jcreamer898/RequireJS-Backbone-Starter

+0

優秀!我會給這一槍! – greenanvil

+0

這裏有一些工作代碼... https://github.com/jcreamer898/Savefavs – jcreamer898

+0

再次感謝您的信息!看起來像我缺少的一個重要的事情是確保在主應用程序本身上調用訂單插件,以確保它加載(並稱爲主幹/下劃線/等) - 之後,他們被加載。我打算也考慮優先配置參數,因爲它可以減輕使用訂單的需要。再次感謝,真的。我不習慣遇到那些給我帶來很多麻煩的事情,並且想避免深入挖掘底層機制,看看到底發生了什麼(現在)。我現在可以將它保存下來,並回到有趣的東西! :)乾杯! – greenanvil

0

使用optamd3分公司。

+0

已經在使用optamd分支(參見原始問題)。這個問題似乎是一個路徑問題,也許是一個主要的應用程序訂單問題。一旦我將主庫放在一起,停止嘗試使用路徑配置選項並通過訂單插件發送主應用程序,所有事情都按預期開始工作。感謝壽。 – greenanvil

5

我有同樣的問題。實際上,我發現你不需要AMD兼容的Backbone或Underscore,或者需要-jquery或其他任何東西(例如!order)。你需要做的只是在路徑中定義應用程序,而不是將其依賴關係設置爲填充:)。不知何故,過去它曾經沒有它。

paths: { 
    app:'app', 
    jquery: '../libs/jquery/jquery.1.9.1.min', 
    underscore: '../libs/underscore/underscore.min', 
    backbone: '../libs/backbone/backbone.min', 
    // ... 
}, 
shim: { 
"app": { 
     deps: ['jquery','underscore','backbone'], 
     exports: 'app' 
}, 
"backbone": { 
    deps: ['jquery','underscore'], 
    exports: 'Backbone' 
}, 
"underscore": { 
    exports: '_' 
} 
//... 

}