使用 mustache 模板和 jquery masonry 实现无限滚动时出现 DOM 异常 8 错误答案

【问题标题】：DOM Exception 8 error when implementing endless scrolling using mustache templates & jquery masonry使用 mustache 模板和 jquery masonry 实现无限滚动时出现 DOM 异常 8 错误
【发布时间】：2012-02-10 15:38:41
【问题描述】：

我正在实现一个深受本教程影响的无限滚动效果：

http://railscasts.com/episodes/295-sharing-mustache-templates?view=asciicast

但是，我的做法略有不同，因为我在前端使用的是 Jquery Masonry (http://masonry.desandro.com/demos/adding-items.html)。

无论如何，当我按如下方式实现时：

jQuery ->
window.endlessScroll = () ->
    if $('#products_page').length   
        new ProductPager

class ProductPager
constructor: ->
    $(window).scroll(@check)

check: =>
    if @nearBottom()
        $(window).unbind('scroll', @check)
        $.getJSON($('#products_page').data('json-url'), @render)

nearBottom: =>
    $(window).scrollTop() > $(document).height() - $(window).height() - 150

render: (products) =>
    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)

我收到以下错误（Chrome）：

未捕获的错误：NOT_FOUND_ERR：DOM 异常 8

我认为问题出在这里：

boxes.push Mustache.render $('#mustache_product').html(), product

因为这会将每个模板输出包装在“引号”中，即

["<div>stuff</div>","<div>more stuff</div>"]

而不是：

[<div>stuff</div>,<div>more stuff</div>]

但是我对自己做错了什么有点心理障碍……有人愿意帮忙吗？

【问题讨论】：

标签： javascript ruby-on-rails-3.1 coffeescript mustache jquery-masonry

【解决方案1】：

我通过更密切地关注 Masonry 网站上的示例来实现这一点，结果如下：

.
.
.
boxMaker.makeBoxes = ->
  boxes = []
  for product in products
    box = document.createElement("div")
    template = Mustache.render $('#mustache_product').html(), product
    box.className = "box"
    box.innerHTML = template
    boxes.push box
  boxes
$boxes = $(boxMaker.makeBoxes())

【讨论】：