3

次のような2つの小さなバックボーンプラグインを入手しました。

(function($, _, Backbone) {

var ListView = Backbone.View.extend({
// blablabla
});

Backbone.ListView = ListView;

})($, _, Backbone);

と

(function($, _, Backbone) {

var Repository = Backbone.Model.extend({
// blablabla
});

Backbone.Repository = Repository;

})($, _, Backbone);

これでrequire.configを設定しました。

require.config({

    baseUrl: "javascripts",

    shim: {
        "jquery": {
            exports: "$"
        },
        "underscore": {
            exports: "_"
        },
        "backbone": {
            deps: ['jquery', 'underscore'],
            exports: "Backbone"
        },
        "ListView": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.ListView"
        },
        "Repository": {
            deps: ['jquery', 'underscore', 'backbone'],
            exports: "Backbone.Repository"
        }        

    },

    paths: {
        "jquery": "Vendors/jquery",
        "underscore": "Vendors/underscore",
        "backbone": "Vendors/backbone",
        "ListView": "Extensions/ListView",
        "Repository": "Extensions/Repository"
    }

});

そして今、私たちは問題に直面しています。両方のプラグインを使用する場合、現在、モジュールの依存関係を処理する必要があるのは次のとおりです。

require(['jquery', 'underscore', 'ListView', 'Repository'], function($, _, Backbone1, Backbone2) {

    // this is backbone + list view
    console.log(Backbone1);
    // this is backbone + repository
    console.log(Backbone2);       

});

しかし、プラグインをバックボーンにすでに登録してもらいたいです。

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

    // this now is backbone + listView + repository
    console.log(Backbone);

});

どうすればよいですか？何を変更する必要がありますか？

よろしく、bodo

4

2 に答える 2

9

まず最初に、次のように、モジュールを作成し、それらをグローバル名前空間から除外することをお勧めListViewしRepositoryますBackbone。

list_view.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.ListView = Backbone.View.extend({
    ... ListView code here ...
  }
  return Backbone.ListView
});

repository.js

define(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
  Backbone.Repository = Backbone.View.extend({
    ... Repository code here ...
  }
  return Backbone.Repository
});

次に、require.jsの構成を使用mapして、両方のモジュールを含むアダプターに依存関係をマップし、循環依存関係を回避するためlist_viewにrepositoryモジュール自体のマッピングを元に戻すことができます。

requirejs.config({
  map: {
    '*': {
      'backbone': 'backbone-adapter'
    },
    'list_view': {
      'backbone': 'backbone'
    },
    'repository': {
      'backbone': 'backbone'
    },
});

backbone-adapter.js次に、プラグインをBackbone自体にバンドルするファイルを作成します。

バックボーン-adapter.js

define(['backbone', 'list_view', 'repository'], function (Backbone) {
  return Backbone;
});

次に、モジュールで'backbone'、依存関係として含めると、requirejsはそれをにマップしbackbone-adapterます。プラグインにはプラグインが含まれ、およびとして使用できるようにBackbone.ListViewなりBackbone.Repositoryます。

上記のコードを実際にテストしたことはありませんが、ベンダーモジュールを独自のプラグインにバンドルするために同様の戦略を使用しており、問題なく機能しています。（アイデアはこの議論から取られています。）

于 2012-11-11T14:16:31.383 に答える
0

私はそのようなことはしません。あなたはすべてのモジュールを含むグローバルオブジェクトを作成しています。これはrequire.jsの使用目的ではありません。

依存関係を明示的に定義する必要があります。必要な場合ListViewはrequire呼び出しにRepository追加し、必要な場合はrequire呼び出しに追加します...

それでもそれを実行したい場合は、独自のバックボーンモジュールを定義できます。

# backbone.js

define(['vendor/backbone', 'ListView', 'Repository'],
  function(Backbone, ListView, Repository) {

    Backbone.ListView = ListView
    Backbone.Repository = Repository

    return Backbone
});

そして、あなたのシム設定：

paths: {
    ...
    "backbone": "backbone",
    ...
}

（繰り返しますが、あなたは本当にそれをするべきではありません!!）

于 2012-11-11T13:56:42.300 に答える