title: Ember - How to 'save' DOM state
body: <p>I'm not so much looking for specific code but rather overall approaches for dealing with the following situation: <em>A user can, by way of click and drag, create a new div wrapped text (lets call it a text node). I want to somehow save the state of the user modified DOM.</em></p>
  
  <p>Check my <a href="http://jsbin.com/ebikun/1/" rel="nofollow">JSBin sample</a> to see exactly what I mean.</p>
  
  <p>The code's been extracted from my Ember project but this is what it does:</p>
  
  <ol>
  <li>The <strong>Click to edit</strong> area is just an Ember view</li>
  <li>When you drag it to the workspace, <strong>Click to edit</strong> is cloned and all Ember bindings are lost (which is totally fine)</li>
  </ol>
  
  <p>So after a user adds one or many text nodes to the workspace I end up with something like this:</p>
  
  <pre><code>&lt;div class="workspace"&gt;
    &lt;div class="text" style="top: 86px; left: 141px;"&gt;Text Node 1&lt;/div&gt;
    &lt;div class="text" style="top: 99px; left: 100px;"&gt;Text Node 2&lt;/div&gt;
    &lt;div class="text" style="top: 10px; left: 44px;"&gt;Text Node 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>tl;dr (get to the **cking question already)</h2>
  
  <p>How would I <strong>save</strong> this information so I can faithfully recreate the users changes on another page?</p>
  
  <p><strong>Some ideas</strong></p>
  
  <ol>
  <li>On route change, loop through every DOM element with the <code>.text</code> class and create an object which store the DOM text and style attributes? I'd then have to create a 'build' type function that loops through the objects and recreates those DOM elements on a given page.</li>
  <li>On route change, loop through every DOM element and save each one into an array as a jQuery object. 'Rebuilding' would just be a question of looping each item in the array and appending to the DOM.</li>
  </ol>
  
  <p><strong>In closing</strong>, what do you think? Ideas, criticisms &amp; past experiences are very much welcome.</p>