非常基本的骨干/通过Require.js问题下划线驾驶我疯狂 [英] Very basic Backbone/Underscore via Require.js issue driving me batty
问题描述
我试图实现使用通过require.js和某种原因，我似乎无法得到的一切正确一字排开加载了jQuery，underscore.js和Backbone.js的一个非常基本的测试。研究表明，人还没有这些同样的问题，所以我知道它必须是简单的东西，我只是没有看到。
我遇到的问题是，当Backbone.js的加载，就不能找到一个参考_。我发现其他人报告了同样的问题，但该问题通常被路过的依赖引用到处理程序的顺序错误或其他明显的问题。当主链是装载这种情况正在发生。
我也看到了一些机械的解决方案，如放在同一个文件中的一切，只是由具有多个脚本加载它们以传统的方式在正确的顺序包括但我真的很想得到这个工作，因为它似乎是个有效的方法。
起初，我开始与结构在这里<一个href=\"http://backbonetutorials.com/organizing-backbone-using-modules/\">http://backbonetutorials.com/organizing-backbone-using-modules/这在演示作品，但因为当我试图做非常简单的修改或建立从地上爬起来一个简单的示例，它打破感觉有点脆弱。
打我的头这太长了，我回去了，发现这个网页
<一href=\"http://stackoverflow.com/questions/8131265/loading-backbone-and-underscore-using-requirejs\">Loading骨干，并强调使用requirejs
另一个简单的例子，我希望恢复。然而，建立在此基础上一个新的测试后，我还是收到了同样的问题，即使骨干0.5.3-optamd分支应该对处理下划线自己的依赖。
事不宜迟，这里是超级直线前进code，应该工作反而是推动我疯了。这里的希望这件事情很明显我只是错过莫名其妙：
index.html的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;通过Require.js学习页面和Backbone.js的LT / Underscore.js;标题＆GT /标题＆GT;
＆LT;脚本SRC =JS /库/要求/ require.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =JS / main.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV＆GT;通过Require.js学习页面和Backbone.js的LT / Underscore.js; / DIV＆GT;
＆LT; DIV CLASS =testhook＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
JS / main.js
require.config（{
路径：{
jQuery的：库/ jQuery的/ 1.7 / jQuery的，
下划线：库/下划线/ 1.2.2 /下划线，
骨干：库/骨干网/ 0.5.3-optamd /骨干
}，
的baseUrl：'/ JS'，
urlArgs：V = 1.0'
}）;要求（[
'domready中'，
应用程序
]
功能（domready中，APP）{
domready中（函数（）{
的console.log（'DOM准备好'）;
App.init（）;
}）;
}
）;
JS / app.js
//文件名：app.js
定义（[
jQuery的，
下划线，
'骨干'
]
功能（$，_，骨干）{ VAR的init =功能（）{ 的console.log（'app.js＆GT;的init（）'）; // jQuery的测试（工程）
$（'。testhook'）追加（'testhook追加'）; //强调测试（工程）
的console.log（_.map（[1，2，3]，函数（n）的{返回N * 2;}））; //主干测试（芯片）
VAR艺术家=新Backbone.Model（{
姓：瓦西里，
名字：康定斯基
}）; artist.set（{生日：1866年12月16日}）; 的console.log（JSON.stringify（艺术家））;
} 返回{INIT：初始化};
}
）;
确切的控制台输出是：
未捕获类型错误：无法调用未定义的扩展（Backbone.js的：150）
main.js：18 DOM是准备就绪
app.js：11 app.js＆GT;在里面（）
app.js：17 [2，4,6]
app.js：20遗漏的类型错误：无法读取空物业模式（app.js：20）注意：
在unminified Backbone.js的150线是：
_.extend（Backbone.Model.prototype，Backbone.Events，{
我使用Chrome 17.0.938.0 DEV-米的Windows 7计算机上。
我的脚本版本是：
骨干：0.5.3-optand
jQuery的：1.7
要求：1.0.1
强调：1.2.2
我的目录结构是：
JS
+ - 库/
| + - 骨干/
| | + - 0.5.3-optamd /
| | + - Backbone.js的
| + - jQuery的/
| | + - 1.7 /
| | + - 的jquery.js
| + - 要求/
| | + - require.js
| + - 下划线/
| + - 1.2.2 /
| + - underscore.js
+ - app.js
+ - domReady.js
+ - main.js
+ - order.js
的index.html
我不能相信这是多么困难，给我和我真的希望有人可以阐明你到底是怎么回事的一些情况。
其实我已经花了很多时间与此完全相同的问题所困扰！
下面是我如何设法得到它的工作...
首先，下载新的采样要求-JS项目使用jQuery 1.7。在zip文件，你会发现一个名为要求-的jquery.js包括jQuery的1.7这是目前AMD兼容。
然后下载最新版本的需要，现在也是AMD，而去年，试试这个版本的骨干...
<一个href=\"https://github.com/jrburke/backbone/blob/optamd/backbone.js\">https://github.com/jrburke/backbone/blob/optamd/backbone.js
伯克创造了这一关骨干的一个分支，并做出了AMD兼容的版本。
则...结果
index.htm的
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;谷歌Analytics（分析）API浏览器和LT; /标题＆GT;
＆LT;！ - 这是jQuery的与RequireJS一个特殊版本的内置 - ＆GT;
＆LT;脚本数据主要=主SRC =要求-的jquery.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT; ＆LT; /身体GT;
＆LT; / HTML＆GT;
main.js
<$p$p><$c$c>require(['jquery','order!libs/underscore-min','order!libs/backbone','order!scripts/app'],功能（$，_，骨干，应用程序）{
app.init（）;
}）;
app.js
定义（['jQuery的'，'骨干'，'脚本/家']函数（$，骨干路由器）{
VAR的init =功能（）{
的console.log（已启动）;
//在这里你可以载入你的路由器/视图/什么
}; 返回{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 结果
<一href=\"https://github.com/jcreamer898/RequireJS-Backbone-Starter\">https://github.com/jcreamer898/RequireJS-Backbone-Starter
I am attempting to implement an EXTREMELY basic test that uses jquery, underscore.js and backbone.js loaded via require.js and for some reason I just cannot seem to get everything lined up properly. Research shows that others have not had these same problems so I know it must be something simple that I am just not seeing.
The problem I am having is that when backbone.js is loading, it cannot find a reference to _. I've found other people reporting the same issue but the problem was usually passing dependency references into handlers in the wrong order or other obvious problems. This is happening when backbone is loading.
I have also seen a number of 'mechanical' solutions such as 'put everything in the same file' and just loading them in a traditional way by having a number of script includes in the proper order but I REALLY want to get this working since it seems like such a powerful approach.
Initially I started with the structure here http://backbonetutorials.com/organizing-backbone-using-modules/ which works in the demo, but feels a little fragile because when I attempt to make very simple modifications or build up a simple sample from the ground up, it breaks.
After hitting my head against this for far too long, I went back and found this page Loading backbone and underscore using requirejs with another simple example and I regained hope. However, after building up a new test based on it, I am STILL receiving the same issue even though the 0.5.3-optamd branch of backbone is supposed to handle its own dependency on underscore.
Without further ado, here is the super-straight-forward code that should work but instead is driving me insane. Here's hoping it's something obvious I just missed somehow:
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 };
}
);
The exact console output is:
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, {
I am on a Windows 7 machine using Chrome 17.0.938.0 dev-m.
My script versions are:
backbone: 0.5.3-optand
jquery: 1.7
require: 1.0.1
underscore: 1.2.2
My directory structure is:
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
I cannot believe how much difficulty this is giving me and am really hoping someone can shed some light on what the heck is going on here.
I have actually spent a lot of time struggling with this same exact problem!
Here's how I have managed to get it working...
First off, download the new sample require-js project with jQuery 1.7. In the zip file you'll find a file called require-jquery.js which includes jQuery 1.7 which is now AMD compliant.
Then download the latest version of require, which is now also AMD, and last, try this version of Backbone...
https://github.com/jrburke/backbone/blob/optamd/backbone.js
Burke has created this off of a fork of backbone and made an AMD compliant version.
Then...
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};
});
My file structure looks like
/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
Let me know if that helps, hit me up on twitter @jcreamer898 if you need some more help, I am literally working on the same stuff!
UPDATE I recently created a Github 2 github projects, one an actual app, and another just a simple starter...
https://github.com/jcreamer898/Savefavs
https://github.com/jcreamer898/RequireJS-Backbone-Starter
这篇关于非常基本的骨干/通过Require.js问题下划线驾驶我疯狂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
