Marionette.js (Backbone) — Как правильно организовать модульную структру?

Question

[movetz]

Возникла некоторая неопределенность с реализацием одного модуля SPA. Модуль включает в себя несколько страниц и набор подмодулей. Каждая страница включает 3 модуля (3 отдельных региона) и модули могут "пересекаться", например:
Страница 1
- Модуль 1
- Модуль 2
- Модуль 3

Страница 2
- Модуль 4
- Модуль 2
- Модуль 3

...

Страница N
- Модуль 1
- Модуль 7
- Модуль 5

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

Answer 1

[aen]

Как вариант вам нужно для каждой страницы определить свой лайаут, в котором прописать те модули, которые нужны. При смене роута просто рендерить нужный лайаут.

Answer 2

[Николай Марков]

Вполне логичным, как мне кажется, является создание функций для загрузки необходимых данный для каждого модуля таких что повторые вызовы возвращают уже загруженные данные, а не делают их reload.

как-то так (метод модели)

loadModuleData: ->
  return @deferred if @deferred?

  @deferred = new $.Deferred()

  // --- загрузка данных ---
  collection = new SomeCollection()
  collection.fetch(reset: true)
    .done => 
      @deferred.resolve()
    .fail (resp) =>
      @deferred.reject(resp)
      delete @deferred
  // --- загрузка данных ---
  
  @deferred.promise()

Так вот. Перед вызовом метода показываем пользователю какой-нибудь прогрессбар или спин. Далее вызываем метод и после загрузки создаем необъодимые вьюхи/модели/коллекции/редерим все. ПОтом прячем прогрессбар/спин и пользователь видит новую страницу.