Question

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

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

注意：为方便起见，我上传了代码here。 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();
        });

Answer 1

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

现在JQuery，Underscore＆amp; Backbone（0.5.3没有注册，你需要a this）支持异步加载，你可以放弃那些被攻击的库而不是标准的库，并且需要这些库注册自己的名称。像这样：

的 Main.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(); });

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

拉出固定代码here

Answer 2

即使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>

无法创建骨干视图

2 个答案: