非常基本的 Backbone/Underscore via Require.js 问题让我抓狂

2024-01-09

我正在尝试实现一个极其基本的测试,该测试使用通过 require.js 加载的 jquery、underscore.js 和backbone.js,但出于某种原因,我似乎无法将所有内容正确排列。研究表明其他人没有遇到过同样的问题,所以我知道这一定是一些我没有看到的简单问题。

我遇到的问题是当backbone.js加载时,它找不到对_的引用。我发现其他人报告了同样的问题,但问题通常是以错误的顺序将依赖项引用传递到处理程序或其他明显的问题。这是在主干加载时发生的。

我还看到了许多“机械”解决方案,例如“将所有内容放在同一个文件中”,然后通过以正确的顺序包含多个脚本来以传统方式加载它们,但我真的很想让它工作,因为它看起来是一个非常强大的方法。

最初我从这里的结构开始http://backbonetutorials.com/organizing-backbone-using-modules/ http://backbonetutorials.com/organizing-backbone-using-modules/它在演示中有效,但感觉有点脆弱,因为当我尝试进行非常简单的修改或从头开始构建一个简单的示例时,它会崩溃。

在我对这个问题思考了太久之后,我回去发现了这个页面使用 RequireJS 加载 Backbone 和 Underscore https://stackoverflow.com/questions/8131265/loading-backbone-and-underscore-using-requirejs再举一个简单的例子,我又重新燃起了希望。然而,在基于它建立一个新的测试之后,即使主干的 0.5.3-optamd 分支应该处理它自己对下划线的依赖,我仍然收到同样的问题。

言归正传,这里是超级直接的代码,应该可以工作,但反而让我发疯。希望这是我刚刚错过的显而易见的事情:

索引.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

我不敢相信这给我带来了多大的困难,我真的希望有人能够阐明这里到底发生了什么。


事实上,我花了很多时间来解决同样的问题!

这是我如何让它工作的......

首先,使用 jQuery 1.7 下载新的示例 require-js 项目。在 zip 文件中,您将找到一个名为 require-jquery.js 的文件,其中包含 jQuery 1.7,现已符合 AMD 标准。

然后下载最新版本的require,现在也是AMD的,最后,尝试这个版本的Backbone...

https://github.com/jrburke/backbone/blob/optamd/backbone.js https://github.com/jrburke/backbone/blob/optamd/backbone.js

Burke 在骨干分支上创建了这个,并制作了 AMD 兼容版本。

Then...
索引.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
/应用程序/main.js
/app/text.js
/app/scripts/app.js
/app/scripts/home.js
/app/lib/underscore-min.js
/app/lib/backbone.js

如果这有帮助,请告诉我,如果您需要更多帮助,请在 Twitter @jcreamer898 上联系我,我正在做同样的事情!

UPDATE我最近创建了一个 Github 2 github 项目,一个是实际的应用程序,另一个只是一个简单的启动器......

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

非常基本的 Backbone/Underscore via Require.js 问题让我抓狂 的相关文章

随机推荐