在Backbone.js / SVG Web应用程序中管理布局？

Question

我正在构建一个Backbone.js应用程序，该应用程序使用了许多SVG元素。

下图显示了基本设置 - 可填充大部分屏幕的可变数量的“小部件”。

每个小部件视图都是一个Backbone视图（当它设置了自己的带有SVG：SVG元素的DIV容器时）用SVG：G元素实例化子视图。

我有两个问题：
1）控制外部布局的好方法是什么？
即用户应该能够添加和删除水平流动的小部件（div），这应该反映在URL状态中。 （每个对应的WidgetModel序列化）。

2）控制内部布局的好方法是什么？
即调整浏览器窗口大小时，内部SVG子视图如何获得其宽度/高度。 我之前采用的方法是使用（窗口）.resize处理程序，它可以找出窗口小部件的大小，并通过模型将布局传递给所有视图和子视图：

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

但也许那是不必要的黑客攻击？另一种方法是每个WidgetView都有自己的resize处理程序但是我必须将宽度/高度传递给需要显式值的子视图吗？

谢谢：）

Answer 1

我完全不明白你想做什么。窗口调整大小时会发生什么？所有小部件都会改变它们的尺寸吗？怎么样？

另一个问题是：宽度和高度属于模型吗？你会把它与小部件一起保存吗？或者它只是用于显示（您可以根据窗口大小计算它？）

如果它们仅用于显示，请将其保留在视图中。有一个管理所有WidgetView视图的WidgetsView，然后窗口调整大小计算布局并告诉每个WidgetView自己调整大小（宽度，高度）。然后我想每个WidgetView都知道它的内部视图应该有多大，所以每个WidgetView都应该相应地调整它内部的内容。