3

我不断收到index.js:7 Uncaught TypeError: Cannot read property 'View' of null，这表明 Backbone 未加载/存在，但是，当我查看页面上加载的资源时，backbone-min.js 存在。

由于没有 404 错误，我认为问题出在脚本本身。有人看到下面的脚本有任何问题吗？

注意：为方便起见，我在这里上传了我的代码。zip 文件包含所有相关的 js 文件。如果您滚动到网页底部，您应该会看到一个“慢速下载”按钮，一旦您单击它，系统会提示您输入验证码。输入代码后，实际下载按钮（在“慢速下载”按钮下）将在几秒钟内出现。

查看：index.js

define([
        "jQuery",
        "Underscore",
        "Backbone"
        // I've tried using the modules above as well as direct loading using order! as seen in the following lines.
        //"order!libs/jquery/jquery-min",
        //"order!libs/underscore/underscore-min",
        //"order!libs/backbone/backbone-min",
        ], 
        function($, _, Backbone){
            console.log(_) // prints "undefined"
            console.log(Backbone) // prints Object
            var IndexView = Backbone.View.extend({ // At this line I now get: Uncaught TypeError: Cannot call method 'extend' of undefined
                render: function(){
                    $(this.el).html("<h1>Welcome Dan!</h1>");
                    $("body").html(this.el);
                }
            });
            return new IndexView();
        });
4

2 回答 2

5

所以这个问题的关键是 underscore.js 的变化。特别是它现在支持 AMD（异步模块定义）。当检测到 require 时下划线不再附加到全局命名空间的事实打破了用于允许标准异步 require 语法但仍保持同步加载的方案。

现在 JQuery、Underscore 和 Backbone（0.5.3 不注册自己，你需要一个 this）支持异步加载，你可以放弃那些被黑的库，转而使用标准库，并要求这些库注册自己的名称。像这样：

主.js

require.config({
    baseUrl: "js",
    paths: { 
               jquery: "libs/jquery/jquery",
               underscore: "libs/underscore/underscore",
               backbone: "libs/backbone/backbone"
           },
    waitSeconds: 10
});

require([
        "app"
        ],
        function(App){
            App.initialize();
            console.log("Main initialized...");
        });

index.js

define([
    "jquery",
    "underscore",
    "backbone"
    ], 
    function($, _, Backbone){
        console.log(_);
        console.log(Backbone);
        var IndexView = Backbone.View.extend({
            render: function(){
                var username = getCookie("username");
                var data = {username: username};
                var compiled = _.template("<h1>Welcome <%= username %></h1>", data);
                $(this.el).html(compiled);
                $("#lt-col").html(this.el);
            }
        });
        return new IndexView();
    });

其他定义已更改以反映新的小写别名。

将固定代码拉到这里

于 2011-11-12T00:01:25.670 回答
1

即使 Backbone 0.5.3 将自己注册为 AMD 模块，它也不会返回任何内容。（下划线也一样）如果你改变你的行：

function($, _, Backbone){

至

function($){

它会起作用的。对于更 requirejs-ish 的解决方案，为骨干创建一个模块，如下所示：

define(
[
    'order!libraries/underscore',
    'order!libraries/backbone.0.5.3'
],
function () {
    return Backbone;
}
);

--更新--附加信息

<head>
<title>Index2</title>
<script src="../../scripts/libraries/require.js" type="text/javascript"></script>
<script type="text/javascript"">
require({
baseUrl: 'scripts'
}, [
'order!libraries/jquery',
'order!libraries/underscore',
'order!libraries/backbone.0.5.3'
], function ($) {
console.log(Backbone);
});
</script>
</head>
于 2011-11-09T19:31:42.763 回答