Очень простой Backbone/Underscore через Require.js проблема вождения меня batty

Я пытаюсь реализовать 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

Я не могу поверить, насколько сложно это мне дает, и я действительно надеюсь, что кто-то может пролить свет на то, что здесь происходит.

Ответы

Ответ 1

Я действительно потратил много времени на борьбу с этой же самой точной проблемой!

Вот как мне удалось заставить его работать...

Прежде всего, загрузите новый проект require-js с помощью jQuery 1.7. В zip файле вы найдете файл require-jquery.js, который включает jQuery 1.7, который теперь совместим с AMD.

Затем загрузите последнюю версию require, которая теперь также AMD, и, наконец, попробуйте эту версию Backbone...

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};
});

Моя файловая структура выглядит как /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

Ответ 3

У меня была та же проблема. Фактически я обнаружил, что вам не нужна совместимая с AMD Backbone или Underscore, или require-jquery или что-нибудь еще (например, порядок). Все, что вам нужно сделать, это приложение, определенное в путях, и задание его зависимостей в прокладке:). Как-то он работал без него в прошлом.

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: '_'
}
//...

}

Ответ 5

Используйте optamd3.