3

継続的に取得index.js:7 Uncaught TypeError: Cannot read property 'View' of nullしています。これは、バックボーンがロードされていない/存在していないことを示していますが、ページのロードされたリソースを確認すると、backbone-min.jsが存在します。

404エラーがないので、問題はスクリプト自体にあると思います。以下のスクリプトに問題がある人はいますか？

注：便宜上、ここにコードをアップロードしました。zipファイルには、関連するすべてのjsファイルが含まれています。Webページの一番下までスクロールすると、「ダウンロードが遅い」ボタンが表示されます。クリックすると、キャプチャコードの入力を求められます。コードを入力すると、実際のダウンロードボタン（[低速ダウンロード]ボタンの下）が数秒以内に表示されます。

ビュー：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はそれ自体を登録しないので、これが必要です）は非同期読み込みをサポートしているので、ハッキングされたライブラリを破棄して標準のライブラリを優先し、それらのライブラリが登録する名前を要求できます。このような：

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

他の定義は、新しい小文字のエイリアスを反映するように変更されました。

ここで固定コードをプルします

于 2011-11-12T00:01:25.670 に答える
1

Backbone 0.5.3はそれ自体をAMDモジュールとして登録しますが、何も返しません。（アンダースコアについても同じです）行を変更した場合：

function($, _, Backbone){

に

function($){

それが動作します。よりrequirejs風のソリューションについては、次のようなバックボーン用のモジュールを作成します。

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

--UPDATE--追加情報

<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 に答える