5

Requirejs を使用して Backbone アプリをモジュール化しようとしていますが、Requirejs に Backbone を含めることができないようです。インデックス ページから含まれる私の main.js は次のとおりです。

require.config({
    baseUrl: '/static/js/',
    paths: {
        jquery: 'libs/jquery/jquery-min',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-min',
        text: 'libs/require/text',
    },
});

require(['/static/js/views/app.js'], function(AppView) {
    var appView = new AppView;
});

上記のファイルから含まれる app.js は次のとおりです。

define([
    'jquery',
    'underscore',
    'backbone',
], function($, _, Backbone) {
  console.log($);
  console.log(_);
  console.log("inside of the app js file");
    var AppView = Backbone.View.extend({

        initialize: function() {
            console.log("inside of appview initialize");
        },

    });
});

次の情報が Google Chrome コンソールに出力されます。

function (a,b){return new e.fn.init(a,b,h)}
app.js:7undefined
app.js:8inside of the app js file
app.js:9Uncaught TypeError: Cannot read property 'View' of undefined

$ の定義は機能しますが、_ と Backbone の定義は機能しません。それらは未定義として表示されます。なぜこれが起こっているのですか？

4

3 に答える 3

5

バックボーンとアンダースコアの分岐バージョンを使用することは避けます。AMD をネイティブにサポートしないサードパーティ ライブラリを処理するために、「shim」構成オプションが requirejs に追加されました。これにより、ライブラリの最新バージョンへの更新がはるかに簡単になります。

http://requirejs.org/docs/api.html#config-shim

次に例を示します。

require.config({
  paths: {
    jquery: "libs/jquery",
    underscore: "libs/underscore",
    backbone: "libs/backbone"
  },
  shim: {
    underscore: {
      exports: '_'
    },
    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    }
  }
});
于 2012-06-25T18:30:30.750 に答える
5

jQuery がバンドルされているバージョンの requireJS を使用することをお勧めします。これにより、セットアップの手間が大幅に軽減されます。ここで詳細を読むことができます: http://requirejs.org/docs/jquery.htmlそしてここでファイルをダウンロードします: https://github.com/jrburke/require-jquery

彼ら自身の言葉で：

RequireJS を使用すると、指定された順序とは異なる順序でスクリプトを読み込むことができます。これにより、jQuery が既にロードされていると想定する jQuery プラグインで問題が発生する可能性があります。結合された RequireJS + jQuery ファイルを使用すると、jQuery プラグインが読み込まれる前に jQuery がページ内にあることが保証されます。

これにより、requireJS を使用して jQuery を適切に読み込むことができます。

<script data-main="js/main" src="js/require-jquery.js"></script>

Main.js

ここにいくつかのメモがあります：

  • すでに処理されているため、jquery へのパスを再定義する必要はありません。
  • jquery を必須モジュールとして指定する必要があります
  • （システムで機能するようにパスを更新する必要がありました）

コード：

require.config({
    baseUrl: 'js/',
    paths: {
        underscore: 'libs/underscore-min',
        backbone: 'libs/backbone-min',
    },
});

require(['jquery', 'app'], function($, AppView) {
    console.log("done w/ requires");
    console.log($)
    console.log(AppView)
    var appView = new AppView;
});

app.js

いくつかのメモ：

  • JS ファイルがモジュールとして定義されている場合は、コールバックでロードした後にのみ JS ファイルを取得できます。したがって、 function($, _, Backbone) は失敗します。
  • main.js コールバックで使用できるように、オブジェクトを返す必要があります (AppView を返す)。

コード：

define(
    [
    'jquery',
    'underscore',
    'backbone',
    ],
    function() {
        console.log($);
        console.log(_);
        console.log(Backbone);
        console.log("inside of the app js file");
        return AppView = Backbone.View.extend({
            initialize: function() {
            console.log("inside of appview initialize");
        },
    });
});

コンソール

そのコードを配置すると、これがコンソール出力です。

function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
    } [app.js:8]

function (a){return new m(a)} [app.js:9]

Object [app.js:10]

inside of the app js file [app.js:11]

done w/ requires main.js:21

function ( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
} [main.js:22]

function (){a.apply(this,arguments)} [main.js:23]

inside of appview initialize [app.js:15]
于 2012-06-25T05:52:16.283 に答える
0

正しい参照バックボーンがない可能性があり、_、これが役立つ可能性があります：</ p>

RequireJSを使用したバックボーンとアンダースコアの読み込み

詳細： http： //requirejs.org/docs/api.html#config-shim

于 2012-06-25T05:43:09.443 に答える