0

Backbone.js モデルとビューで構成される、さまざまな視覚化コンポーネントを使用して Web アプリケーションを構築しています。

たとえば、「PopulationVisualization コンポーネント」には次のようなものがあります。

  • メイン モデル - コンポーネントの状態を保存する
  • いくつかのバックボーン ビュー (timesliderView、legendView など) - モデルの変更をリッスンする

これらのコンポーネントはすべて、外部の dataManagers および dataSource オブジェクトに依存していますが、それ以外の場合は分離する必要があります。

特定のページで、PopulationVisualization コンポーネントのインスタンスをインスタンス化したいと考えています。また、そのコンポーネントのメイン モデルの変更をリッスンして、その状態を URL にシリアル化できるようにしたいと考えています。

1) AMD モジュール パターンを採用してみたら、これはどのように見えるでしょうか?
2) PopulationVisualization コンポーネントのモジュールを 1 つ作成しますか?それとも複数作成しますか?
3) モジュール レベルのメソッドを API として公開するか、それとも内部のモデルとビューを直接操作できるようにするか?

ありがとう。

4

1 に答える 1

1

あなたの質問に答えるために、3つすべてに答える私のアドバイスは次のとおりです。

モジュールはできるだけ小さくする必要があるため、ビューごとに新しいモジュールを作成し、モジュール用に 1 つ、シリアライゼーション ロジック用に 1 つ作成します。次に、外部コードがモデル、ビュー、またはシリアル化を処理する必要がないように、これらすべてを結び付ける 1 つのモジュールを作成します。

これが私の最初の刺し傷です。

// components/populationVisualization/Model.js
define(function (require, exports, module) {
  return Backbone.Model.extend({ /* ... */});
});

// components/populationVisualization/views/Timeslider.js
define(function (require, exports, module) {
  return Backbone.View.extend({ /* ... */});
});

// components/populationVisualization/views/Legend.js
define(function (require, exports, module) {
  return Backbone.View.extend({ /* ... */});
});

// components/populationVisualization/serializer.js
define(function (require, exports, module) {
  exports.setupSerialization = function (model) {
    // ...
  };
});

// components/populationVisualization.js
define(function (require, exports, module) {
  var Model = require("./populationVisualization/Model");
  var TimesliderView = require("./populationVisualization/views/Timeslider");
  var LegendView = require("./populationVisualization/views/Legend");
  var serializer = require("./populationVisualization/serializer");

  exports.createAndRender = function (modelParams, $el) {
    var model = new Model(modelParams);
    serializer.setupSerialization(model);

    var timesliderView = new TimesliderView({ model: model });
    var legendView = new LegendView({ model: model });

    $el.append(timesliderView.el);
    $el.append(legendView.el);
  };
});

アプリの他の場所では、適切なパラメーターを使用してrequire("components/populationVisualization")そのモジュールのcreateAndRenderメソッドを呼び出すだけです。

于 2012-02-08T05:23:19.433 に答える