title: Managing layouts in Backbone.js / SVG web app?
body: <p>I am building a Backbone.js app which makes use of a number of SVG elements.</p>
  
  <p>The image below shows the basic setup - a variable number of "widgets" that should fill up most of the screen.</p>
  
  <p>Each widget view is a Backbone view that (when it has setup its own DIV container with an SVG:SVG element) instantiates subviews with SVG:G elements.</p>
  
  <p><strong>I have a 2 questions:</strong><br>
  <em>1) What would be a good way of controlling the external layout?</em><br>
  I.e. the user should be able to add and remove widgets (divs) that flows horizontally and this should be reflected in the URL state. (With each corresponding WidgetModel serialized).</p>
  
  <p><em>2) What would be a good way of controlling the internal layout?</em><br>
  I.e. when the browser window is resized, how do the inner SVG subviews get their widths/heights.
  The approach I took to this before was having a (window).resize handler that could find out the widget sizes and pass the layout via the model to all views and subviews:</p>
  
  <pre><code>$(window).resize(function() {               
      var activeWidgets = [widgetModel1, widgetModel2 ...]
      each activeWidgets
           widgetModel.set({width: widgetWidth, height: widgetHeight})
  });
  </code></pre>
  
  <p>But perhaps that is an unnecessary hack? Another approach would be each WidgetView having its own resize handler but then I have to pass around the width/height to the sub-views that need explicit values?</p>
  
  <p><img src="https://i.stack.imgur.com/c5mb1.png" alt="enter image description here"></p>
  
  <p>Thanks :)</p>