我正在尝试实现一个非常基本的测试，它使用通过 require.js 加载的 jquery、underscore.js 和backbone.js，但由于某种原因，我似乎无法正确排列所有内容。研究表明，其他人没有遇到过同样的问题，所以我知道这一定是我没有看到的简单问题。
我遇到的问题是，当backbone.js 加载时，它找不到对_ 的引用。我发现其他人报告了同样的问题，但问题通常是以错误的顺序或其他明显问题将依赖引用传递给处理程序。这在主干加载时发生。
我还看到了许多“机械”解决方案，例如“将所有内容放在同一个文件中”，并通过按正确顺序包含一些脚本以传统方式加载它们，但我真的想让它工作，因为它似乎是一种强大的方法。
最初我从这里的结构开始 http://backbonetutorials.com/organizing-backbone-using-modules/它在演示中有效，但感觉有点脆弱，因为当我尝试进行非常简单的修改或从头开始构建一个简单的示例时，它会崩溃。
在我的头撞到这个太久之后，我回去找到了这个页面
Loading Backbone and Underscore using RequireJS
再举一个简单的例子，我重拾希望。然而，在基于它建立一个新的测试之后，我仍然收到同样的问题，即使主干的 0.5.3-optamd 分支应该处理它自己对下划线的依赖。
事不宜迟，这里是应该可以工作但让我发疯的 super 直接代码。希望这是我以某种方式错过的显而易见的事情:
索引.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
我无法相信这给我带来了多大的困难，我真的希望有人能对这里发生的事情有所了解。
最佳答案
我实际上花了很多时间来解决同样的问题!
这是我设法让它工作的方式......
首先，下载带有 jQuery 1.7 的新示例 require-js 项目。在 zip 文件中，您会找到一个名为 require-jquery.js 的文件，其中包含 jQuery 1.7，它现在与 AMD 兼容。
然后下载最新版本的require，现在也是AMD，最后试试这个版本的Backbone...
https://github.com/jrburke/backbone/blob/optamd/backbone.js
Burke 已经从主干的分支中创建了这个，并制作了一个 AMD 兼容版本。
然后...
索引.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>
主文件
require(['jquery','order!libs/underscore-min','order!libs/backbone','order!scripts/app'],
function($,_,Backbone,app){
app.init();
});
应用程序.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};
});
我的文件结构看起来像
/app/index.htm
/app/require-jquery.js
/app/order.js
/应用程序/main.js
/app/text.js
/app/scripts/app.js
/app/scripts/home.js
/app/lib/underscore-min.js
/app/lib/backbone.js
如果这有帮助，请告诉我，如果您需要更多帮助，请在 twitter @jcreamer898 上联系我，我确实在做同样的事情!
更新 我最近创建了一个 Github 2 github 项目，一个是实际的应用程序，另一个只是一个简单的入门......
https://github.com/jcreamer898/Savefavs
https://github.com/jcreamer898/RequireJS-Backbone-Starter
关于backbone.js - 非常基本的 Backbone/Underscore 通过 Require.js 问题驱动我，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8175109/