title: DOM Exception 8 error when implementing endless scrolling using mustache templates & jquery masonry
body: <p>I am implementing an endless scrolling effect heavily influenced by this tutorial: </p>
  
  <p><a href="http://railscasts.com/episodes/295-sharing-mustache-templates?view=asciicast" rel="nofollow">http://railscasts.com/episodes/295-sharing-mustache-templates?view=asciicast</a></p>
  
  <p>However, I am doing it slightly differently because I am using Jquery Masonry (http://masonry.desandro.com/demos/adding-items.html) on the front end.</p>
  
  <p>Anyway, when I implement this as follows:</p>
  
  <pre><code>jQuery -&gt;
  window.endlessScroll = () -&gt;
      if $('#products_page').length   
          new ProductPager
  
  class ProductPager
  constructor: -&gt;
      $(window).scroll(@check)
  
  check: =&gt;
      if @nearBottom()
          $(window).unbind('scroll', @check)
          $.getJSON($('#products_page').data('json-url'), @render)
  
  nearBottom: =&gt;
      $(window).scrollTop() &gt; $(document).height() - $(window).height() - 150
  
  render: (products) =&gt;
      boxes= []
      $container = $('#products_page')
      for product in products
          boxes.push Mustache.render $('#mustache_product').html(), product 
      $container.append(boxes).masonry "appended", boxes
      $(window).scroll(@check)
  </code></pre>
  
  <p>I get the following error (Chrome): </p>
  
  <p>Uncaught Error: NOT_FOUND_ERR: DOM Exception 8</p>
  
  <p>I think the problem lies here:</p>
  
  <pre><code>boxes.push Mustache.render $('#mustache_product').html(), product
  </code></pre>
  
  <p>because this wraps each template output in "quotes" i.e.</p>
  
  <pre><code>["&lt;div&gt;stuff&lt;/div&gt;","&lt;div&gt;more stuff&lt;/div&gt;"]
  </code></pre>
  
  <p>rather than:</p>
  
  <pre><code>[&lt;div&gt;stuff&lt;/div&gt;,&lt;div&gt;more stuff&lt;/div&gt;]
  </code></pre>
  
  <p>But I am having a bit of a mental block about what I am doing wrong.... anyone care to help?</p>