Управление макетами в веб-приложении Backbone.js / SVG?

Question

Я создаю приложение Backbone.js, которое использует несколько элементов SVG.

На рисунке ниже показана базовая настройка - переменное количество «виджетов», которые должны занимать большую часть экрана..

Каждый виджет представляет собой вид Backbone, который (когда он настроил свой собственный контейнер DIV с элементом SVG: SVG) создает экземпляры подпредставлений с элементами SVG: G.

У меня естьa 2 вопроса:
1) Каким будет хороший способ управления внешним макетом?
Т.е. пользователь должен иметь возможность добавлять и удалять виджеты (div), которые текут горизонтальнои это должно быть отражено в состоянии URL.(С каждой соответствующей сериализацией WidgetModel).

2) Каков хороший способ управления внутренней компоновкой?
Т.е. при изменении размера окна браузера, как работает внутренний SVGподпредставления получают свою ширину / высоту.Подход, который я использовал к этому раньше, имел обработчик (window) .resize, который мог бы определять размеры виджетов и передавать макет через модель всем видам и подпредставлениям:

$(window).resize(function() {               
    var activeWidgets = [widgetModel1, widgetModel2 ...]
    each activeWidgets
         widgetModel.set({width: widgetWidth, height: widgetHeight})
});

Но, возможно, этоненужный взлом?Другим подходом может быть то, что каждый WidgetView имеет свой собственный обработчик изменения размера, но тогда мне нужно передать ширину / высоту дочерним представлениям, которым нужны явные значения?

Спасибо :)

Answer 1

Я не совсем понимаю, что вы хотите сделать. Что происходит при изменении размера окна? Все ли виджеты меняют свои размеры? Как?

Другой вопрос: ширина и высота в модели? Вы бы сохранили это вместе с виджетом? Или это только для отображения (и вы можете рассчитать его в зависимости от размера окна?)

Если они только для отображения, сохраните их в представлениях. Иметь WidgetsView, который управляет всеми представлениями WidgetView, а затем окно изменяет размеры, вычисляет макет и сообщает каждому WidgetView изменить его размер (ширина, высота). Затем я полагаю, что каждый WidgetView знает, насколько большими должны быть его внутренние представления, поэтому каждый WidgetView должен соответствующим образом изменить размер того, что находится внутри него.