Я пытаюсь реализовать EXTREMELY базовый тест, который использует jquery, underscore.js и backbone.js, загруженные с помощью require.js, и по какой-то причине я просто не могу получить все, что выстроились правильно. Исследования показывают, что у других не было таких же проблем, поэтому я знаю, что это должно быть что-то простое, чего я просто не вижу.
Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке backbone.js он не может найти ссылку на _. Я обнаружил, что другие люди сообщали об одной и той же проблеме, но проблема обычно заключалась в том, чтобы передавать ссылки зависимостей в обработчики в неправильном порядке или другие очевидные проблемы. Это происходит, когда базовая станция загружается.
Я также видел ряд "механических" решений, таких как "помещать все в один файл" и просто загружать их традиционным способом, если число script включено в правильном порядке, но я ДЕЙСТВИТЕЛЬНО хочу получите эту работу, поскольку она кажется таким мощным подходом.
Первоначально я начал со структуры здесь http://backbonetutorials.com/organizing-backbone-using-modules/, которая работает в демо, но чувствует себя немного хрупкой, потому что, когда я пытаюсь сделать очень простые изменения или создать простой образец с нуля, он ломается.
После слишком долгого удара головой, я вернулся и нашел эту страницу Загрузка базовой и поддеробной с использованием 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, {
Я нахожусь на машине под Windows 7, используя Chrome 17.0.938.0 dev-m.
Мои версии script:
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
Я не могу поверить, насколько сложно это мне дает, и я действительно надеюсь, что кто-то может пролить свет на то, что здесь происходит.