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

Question

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

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

每个小部件 View 都是一个 Backbone View (当它使用 SVG:SVG 元素设置自己的 DIV 容器时)使用 SVG:G 元素实例化 subview 。

我有两个问题:
1) 控制外部布局的好方法是什么？
IE。用户应该能够添加和删除水平流动的小部件 (div)，这应该反射(reflect)在 URL 状态中。 (每个相应的 WidgetModel 都已序列化)。

2) 控制内部布局的好方法是什么？
IE。当浏览器窗口大小调整时，内部 SVG subview 如何获取它们的宽度/高度。我之前采取的方法是有一个 (window).resize 处理程序，它可以找出小部件的大小并通过模型将布局传递给所有 View 和 subview :

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

但这也许是不必要的黑客行为？另一种方法是每个 WidgetView 都有自己的调整大小处理程序，但我必须将宽度/高度传递给需要显式值的 subview ？

谢谢:)

Answer 1

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

另一个问题是:宽度和高度是否属于模型？您会将其与小部件一起保存吗？还是只是为了显示(并且可以根据窗口大小来计算？)

如果它们只是为了显示，请将其保留在 View 中。有一个WidgetsView来管理所有的WidgetView View ，然后窗口调整大小计算布局并告诉每个WidgetView将自身调整大小为(宽度，高度)。然后我假设每个 WidgetView 都知道其内部 View 应该有多大，因此每个 WidgetView 应该相应地调整其内部 View 的大小。