Backbone.js/SVG Webアプリケーションのレイアウトを管理しますか？

Question

私はいくつかのSVG要素を利用するBackbone.jsアプリケーションを構築しています。

下の画像は、基本的な設定を示しています。画面の大半を占める「ウィジェット」の数が異なります。

各ウィジェットビューは、（SVG：SVG要素を持つ独自のDIVコンテナをセットアップすると）SVG：G要素を使ってサブビューをインスタンス化するバックボーンビューです。外部のレイアウトを制御するための良い方法だろう何
1）：

は、私は2つの質問がありますか？
I.e.ユーザーは水平方向に流れるウィジェット（div）を追加したり削除したりできます。これはURL状態に反映されるはずです。 （それぞれの対応するWidgetModelを直列化して）。

2）内部レイアウトを制御するにはどうすればよいでしょうか？
I.e.ブラウザウィンドウのサイズが変更されたとき、内側のSVGサブビューはどのように幅/高さを取得しますか？ ウィジェットのサイズを見つけると、すべてのビューとサブビューのモデルを用いてレイアウトを渡すことができ、私はこの前に持っていた（ウィンドウ）.resizeハンドラに取ったアプローチ：

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

しかし、おそらくそれは不要ですハック？もう1つのアプローチは、それぞれのWidgetViewが独自のサイズ変更ハンドラを持つことですが、次に明示的な値を必要とするサブビューに幅と高さを渡す必要があります。

感謝:)

Answer 1

私は完全にあなたが何をしたいのか理解していません。ウィンドウのサイズが変更されるとどうなりますか？すべてのウィジェットは次元を変更しますか？どうやって？

もう1つの質問は、幅と高さがモデルに属しているかどうかです。ウィジェットと一緒にそれを保存しますか？または、表示用です（ウィンドウサイズに応じて計算できます）。

表示専用の場合は、ビューに保持してください。すべてのWidgetViewビューを管理するWidgetsViewを用意し、ウィンドウのサイズ変更でレイアウトを計算し、各WidgetViewに（width、height）のサイズを変更するよう指示します。次に、各WidgetViewは内部ビューの大きさを知っているので、各WidgetViewはそれに応じて内部のサイズを変更する必要があります。