Очень простой Backbone / Underscore через проблему Require.js сводит меня с ума - PullRequest
15 голосов
/ 18 ноября 2011

Я пытаюсь внедрить базовый тест EXTREMELY, который использует jquery, underscore.js и backbone.js, загруженные через require.js, и по какой-то причине я просто не могу выстроить все правильно.Исследования показывают, что у других не было таких проблем, поэтому я знаю, что это должно быть что-то простое, чего я просто не вижу.

Проблема, с которой я сталкиваюсь, заключается в том, что при загрузке backbone.js не удается найти ссылку на _.Я обнаружил, что другие люди сообщали о той же проблеме, но проблема обычно заключалась в передаче ссылок на зависимости в обработчики в неправильном порядке или других очевидных проблем.Это происходит, когда загружается магистраль.

Я также видел ряд «механических» решений, таких как «поместить все в один файл» и просто загрузить их традиционным способом, включив в себя несколько сценариев.в правильном порядке, но я ДЕЙСТВИТЕЛЬНО хочу, чтобы это работало, так как это кажется таким мощным подходом.

Изначально я начал со структуры здесь http://backbonetutorials.com/organizing-backbone-using-modules/, которая работает в демоверсии, но чувствует себя немногохрупкий, потому что, когда я пытаюсь сделать очень простые модификации или создать простой образец с нуля, он ломается.

После слишком долгого удара головой я вернулся и нашел эту страницу Загрузка Backbone и Underscore с использованием 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.

Мои версии скриптов:

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

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

Ответы [ 5 ]

20 голосов
/ 18 ноября 2011

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

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

Прежде всего, загрузите новый пример проекта 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

Дайте мне знать, если это поможет, нажмитеменя в твиттере @ jcreamer898, если вам нужна дополнительная помощь, я буквально работаю над тем же!

ОБНОВЛЕНИЕ Я недавно создал проекты Github 2 github, один из которых является настоящим приложением, идругой просто простой стартер ...

https://github.com/jcreamer898/Savefavs
https://github.com/jcreamer898/RequireJS-Backbone-Starter

7 голосов
/ 28 ноября 2011

Не стесняйтесь взглянуть на Модульный шаблон проекта Backbone.js , который содержит новейшие jQuery, Underscore, Backbone.js и RequireJS, склеенные вместе.

5 голосов
/ 24 марта 2013

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

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

}

3 голосов
/ 25 мая 2012

Вот пример того, как настроить Backbone, lodash (замена подчеркивания), jQuery и Require: https://github.com/gfranko/Backbone-Require-Boilerplate

0 голосов
/ 20 ноября 2011

Использовать optamd3 ответвление.

...