0

私は RequireJS を初めて使用しますが、レンガの壁にぶつかっているようです。

問題は私の「アプリ」モジュールから始まります。RequireJS にリーフ モジュール (「アプリ」に依存するパッケージ) をロードするように指示する方法がわかりません。

システム内の何も依存せず、どこにも登録されていないため、理由は理解していると思いますが、このケースに対処する必要があります。

これらのモジュールについて RequireJS に知らせ、適切にロードするにはどうすればよいですか?

乾杯

//index.html
....
<script data-main="app/config" src="/assets/js/libs/require.js"></script>
....

//config.js
require.config({
    deps: [ "app" ],
    paths: {
        libs: "../assets/js/libs",
        plugins: "../assets/js/plugins",
        jquery: "../assets/js/libs/jquery",
        underscore: "../assets/js/libs/underscore",
        backbone: "../assets/js/libs/backbone",
        marionette: "../assets/js/libs/backbone.marionette"
    }
});

//app.js
require(
    [ "jquery", "underscore", "backbone", "marionette" ],
    function ( $, _, Backbone, Marionette ) {
        //....
    }
);

//app.view.js
require(
    [ "jquery", "underscore", "backbone", "marionette", "app" ], 
    function ( $, _, Backbone, Marionette, App ) {
        //....
    }
);

//app.route.js 
require(
    [ "backbone", "app" ], 
    function ( Backbone, App ) {
        //....
    }
);

したがって：

  • app.js は「jquery」、「underscore」、「backbone」、「marionette」に依存します
  • app.view.js は「jquery」、「underscore」、「backbone」、
  • 「マリオネット」、「アプリ」 app.route.js は「バックボーン」、「アプリ」に依存します
4

2 に答える 2

2

ドキュメントに記載されているように -> http://requirejs.org/docs/api.html#config 依存関係は deps 配列で定義されています。これらは、require.js が実行されたときに最初にロードされるものであり、require.js をロードする前に依存関係を定義する必要がある場合に最もよく使用されます。

これはあなたの構造がどのように見えるべきかです

//config.js
require.config({
    paths: {
        libs: "../assets/js/libs",
        plugins: "../assets/js/plugins",
        jquery: "../assets/js/libs/jquery",
        underscore: "../assets/js/libs/underscore",
        backbone: "../assets/js/libs/backbone",
        marionette: "../assets/js/libs/backbone.marionette"
    }
});

require(['app']);

//app.js
define(
    [ "jquery", "underscore", "backbone", "marionette" ],
    function ( $, _, Backbone, Marionette ) {
        //....
    }
);

//app.view.js
define(
    [ "jquery", "underscore", "backbone", "marionette", "app" ], 
    function ( $, _, Backbone, Marionette, App ) {
        //....
    }
);

//app.route.js 
define(
    [ "backbone", "app" ], 
    function ( Backbone, App ) {
        //....
    }
);

すべてのライブラリとモジュールは AMD 準拠である必要があり、app.view.js のように app をパスとして使用する場合は、パスとして定義する必要があることに注意してください。パスとして require.config で定義されていない場合、[ "Backbone", "App" ] のようにモジュールをロードできないため、egis と同じです。

于 2012-05-24T09:28:32.637 に答える
1

これが私が起動する方法です：

// main.js
define(["jquery", "app", "router"], function ($, App) {
  "use strict";
  // domReady plugin maybe best used here?
  $(function() {
    App.start();
  });
});

// app.js
define(["backbone", "marionette"], function (Backbone) {
  "use strict";
  var app = new Backbone.Marionette.Application();
  app.on("initialize:after", function(options){
    if (Backbone.history){
      Backbone.history.start();
    }
  });

  return app;
});

// router.js
define(["backbone", "controller", "marionette"], function(Backbone, controller) {
  "use strict";
  var Router = Backbone.Marionette.AppRouter.extend({
    appRoutes: {
        "": "index"
    }
  });
  return new Router({
    controller: controller
  });
});

// controller.js
define(["view"], function(View) {
  return {
    "index": {
      new View(); // Do what you like here…
    }
  }
});

// view.js
define(["backbone"], function(Backbone) {
  // view here
});

router.js への依存関係は app.js に置くことができると思いますが、基本的に Backbone.history.start() への呼び出しにはルーターをロードする必要があります。ルーターはコントローラーに依存しています。それによって使用されるビューなどへのすべての依存関係を持つのはコントローラーです。モデルやコレクションなどがあるかもしれません。

それが役立つことを願っています。

于 2012-07-05T23:28:12.067 に答える