gre*_*vil 15 requirejs backbone.js underscore.js
我正在尝试实现一个极端的基本测试,它使用通过require.js加载的jquery,underscore.js和backbone.js,出于某种原因,我似乎无法正常排列所有内容.研究表明,其他人没有遇到过同样的问题,所以我知道它一定是简单的,我只是没有看到.
我遇到的问题是,当backbone.js加载时,它找不到_的引用.我发现其他人报告了同样的问题,但问题通常是将依赖引用以错误的顺序传递给处理程序或其他明显的问题.当主干加载时会发生这种情况.
我还看到了许多"机械"解决方案,例如"将所有内容放在同一个文件中",并且只是按照正确的顺序将一些脚本包含在内,以传统的方式加载它们,但我真的想让它工作,因为它看起来像是一个强大的方法.
最初我开始使用这里的结构http://backbonetutorials.com/organizing-backbone-using-modules/,它在演示中起作用,但感觉有点脆弱,因为当我尝试进行非常简单的修改或从中构建一个简单的样本时它破碎了.
在对抗了这个问题很长时间之后,我回过头来找到这个页面 使用RequireJS加载Backbone和Underscore 以及另一个简单的例子,我重拾希望.但是,在基于它构建新测试之后,即使主干的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
我无法相信这给我带来了多大的困难,我真的希望有人可以了解这里到底发生了什么.
jcr*_*898 20
实际上我花了很多时间来解决同样的问题!
这是我如何设法让它工作......
首先,使用jQuery 1.7下载新的require-js项目.在zip文件中,你会找到一个名为require-jquery.js的文件,其中包含现在符合AMD标准的jQuery 1.7.
然后下载最新版本的require,现在也是AMD,最后,试试这个版本的Backbone ......
https://github.com/jrburke/backbone/blob/optamd/backbone.js
Burke已经创建了一个主干叉,并制作了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};
});
我的文件结构类似于
/app/index.htm
/app/require-jquery.js
/app/order.js
/app/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
我有同样的问题.实际上我发现你不需要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: '_'
}
//...
}
| 归档时间： |
|
| 查看次数： |
12020 次 |
| 最近记录： |