Как организовать группировку коллекций и моделей?

Question

[Алексей Уколов]

Пишу веб-приложение с использованием backbone.js и marionette.js.

Есть коллекция, содержащая ~1000 моделей. У каждой модели есть свойство "аварии".
Есть модуль, который рендерит эту коллекцию в CompositeView.
Есть еще один модуль, который пинает сервер на предмет обновления моделей и если что-то изменилось выполняет model.set. После этого модель перерендеривается.

Эта система сейчас работает.

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

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

Update (вынес из комментария к ответу): Как отфильтровать модели понятно, меня более архитектурно интересует - вот эти отфильтрованные модели станут отдельной коллекцией?
Потом нужно, видимо, в модуле, которые следит за обновлениями эмитировать событие, что модель изменилась, а модуль отображения уже должен эти события слушать и действовать соответственно. Ведь не получится следить за событием change на моделях оригинальной коллекции, если мы их скопируем в новую коллекцию?

Answer 1

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

Можно применить подход ViewModel.
создать отдельные коллекции для каждого типа аварии и модель для этой коллекции, которая будет хранить в себе ссылку на (уже настоящую модель). При инициализации страницы нужно будет создать такие "фиктивные" модели для каждой аварии. Тем самым вы получите ситуацию когда сама модель будет в одной коллекции (в вашей глобальной коллекции аварий, где ~1000 записей), а в CompositeView будут отображаться "фиктивные" модели, содержащие в себе настоящие модели аварий.

Идея в том, что нужно отделять логику хранения данных от логики отображения. Часто, используя backbone, приходится хранить в модели данные, которые относятся только к отображению (например, статус "выбрано"/"не выбрано"). Так вот VIewModelпозволяет это сделать (отделить логику хранения от логики отображения).

Как-то сумбурно получилось, но надеюсь идею донести удалось.

UPD: С таким подходом также удобно отслеживать появление новых моделей в основной коллекции и при необходимости добавлять их нужные группы

Comments

[Алексей Уколов]

Спасибо за ответ в итоге я именно так и организовал.

Answer 2

[personaljs]

var models = this.collection.findWhere({'авария' : 'такая то'});
_.each(models, renderOne);

Comments

[Алексей Уколов]

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

[personaljs]

это будет просто массив тех же самых моделей(аналогичный массиву в collection.models) из коллекции и все события присущие моделям будут так же доступны в них. Попрбуйте и вам станет ясно

[personaljs]

так как where и findWhere и все остальные функции принадлежат к коллекции то и данные у них для обработки те же самые, вместе с событиями и всем остальным

[Алексей Уколов]

Спасибо за советы, попробовал - действительно, многое стало понятнее.