Блог

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

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

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

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

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

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

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

Спасибо 🙂

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

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

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