1

require.js、backbone.js、underscore.jsを使ってスケルトンアプリを作りたいです。www のチュートリアルに従ってスケルトンを作成しましたが、どこかにバグがあります。

これは init.js コードです:

requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery',
        underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore',
        backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone'
    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        jquery: {
            exports: '$'
        }
    }
});

require(['underscore', 'backbone', 'app'],
function(_, Backbone, app) {
    console.log(app);
    app.start();
});

これは app.js です:

require(['underscore', 'backbone'],
function(_, Backbone) {

    'use strict';

    return {
        start: function() {
            console.log('APP', 'start');
        }
    };
});

これは index.html です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Wealthy Laughing Duck</title>
        <script data-main="js/init" src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js"></script>
    </head>
    <body>
    </body>
</html>

私が直面している問題は、app.js ファイルreturnが機能しないことです (おそらく、require.js に何か問題があります)。コンソール出力は次のとおりです。

undefined ----- init.js:24
Uncaught TypeError: Cannot call method 'start' of undefined ----- init.js:25

問題は、 で定義されているのに、なぜapp内部init.jsで定義されていないのかということapp.jsです。

編集: ディレクトリ構造は次のようになります。

/ index.html
/ js / init.js
/ js / app.js
4

4 に答える 4

3

app.js はdefineではなくを呼び出す必要がありrequireます。これにより、「app」という名前のモジュールが他のモジュールに提供されます。

app.js

define(['underscore', 'backbone'],
function(_, Backbone) {

    'use strict';

    return {
        start: function() {
            console.log('APP', 'start');
        }
    };
});
于 2013-05-17T18:02:36.017 に答える
0

アプリを要求するには、アプリをパスに追加する必要があると思います。

requirejs.config({
    baseUrl: 'js',
    paths: {
        jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery',
        underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4   /underscore',
        backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone'
        app:  '../../App' // your relative pathwhere you have your app.js file
    },
    shim: {
        backbone: {
             deps: ['jquery', 'underscore'],
             exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        jquery: {
            exports: '$'
        }
    }
 });
于 2013-05-17T17:51:44.347 に答える
0

あなたのinit.jsで私が観察したことは、require呼び出しで_とバックボーンをロードする必要がないことです。init.js での require 呼び出しは、次のように単純にする必要があります。

require(['app'],
function(app) {
    console.log(app);
    app.start();
});

これは問題の解決策ではありませんが、不要なスクリプトを読み込まないようにするための良い方法です。

基本的に、ここでの問題はrequireとdefineの使用法に関するものだと思います。

require is always execution and define is definition

Define() 関数は次の 3 つのことを行います。

  1. 指定された依存関係をロードします
  2. コールバック関数を呼び出します
  3. コールバック関数の戻り値をモジュールとして登録

Require() 関数は、ステップ 1 と 2 のみを完了します。

そこで定義し、init.jsファイルでapp.jsを実行しているため、app.jsファイルでrequireの代わりにdefineを使用する必要があります

于 2013-07-29T18:02:53.593 に答える
0

あなたが経験しているのは、何よりも構文上の問題だと思います。以下は、require.js の上で呼び出す require_config.js のセットアップ方法です。

require.config({
    baseUrl: '/ui/js',
    paths : {
        'incl' : '/ui/incl'
    },
    shim: {
        'backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['underscore', 'jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        }
    }
});

これにより、すべての依存関係が設定されます (スクリプト タグでバックボーンとアンダースコアと jquery を宣言するだけなので、パス メンバーはありません)。しかし、それらがすべて定義されたら、再度参照する必要はありません。この点を示す簡単なコントローラーの例を次に示します。

require([
    'models/myModel',
    'views/myView
], function(MyModel, MyView) {
    var MyController = function() {
        var my_model = new MyModel();
        var view = new MyView({
            model : my_model
        });
    }

    $(function() {
        new MyController();
    });
});

ご覧のとおり、jQuery、Backbone、Underscore のいずれも参照されていません。それらはすでに読み込まれています。

于 2013-05-17T18:02:32.870 に答える