2011-11-17 43 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: '_' 
} 
//... 

}