Как организовать мой код JavaScript MVC в модули AMD?

Я создаю веб-приложение с различными компонентами визуализации, состоящими из моделей и представлений Backbone.js:

Например, компонент PopulationVisualization может иметь:

  • основная модель - хранение состояния компонента
  • несколько представлений Backbone (timesliderView, legendView и т.д.) - прослушивание изменений в модели

Все эти компоненты зависят от внешних объектов dataManager и dataSource, но в остальном они должны быть разделены.

На данной странице я хотел бы создать экземпляр компонента PopulationVisualization. Я также хотел бы отслеживать изменения в основной модели этого компонента, чтобы я мог сериализовать его состояние в URL-адресе.

1) Как бы это выглядело, если бы я попытался применить модульный шаблон AMD?
2) Создал бы я один модуль компонента PopulationVisualization или несколько?
3) Буду ли я предоставлять методы на уровне модуля как API или Я предоставляю прямые манипуляции с внутренними моделями и представлениями?

Спасибо.


requirejs modularity backbone.js js-amd
person dani    schedule 25.11.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы ответить на ваши вопросы, вот мой совет, отвечающий на все три:

Модули должны быть как можно меньше, поэтому я бы создал новый модуль для каждого представления, один для модуля и один для логики сериализации. Затем я бы создал один модуль, который связывает все это вместе, чтобы внешнему коду не приходилось иметь дело с моделями, представлениями или сериализацией.

Вот мой первый удар по чему-то вроде этого:

// 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 этого модуля с соответствующими параметрами.

person Domenic    schedule 08.02.2012