Question

I am implementing an endless scrolling effect heavily influenced by this tutorial:

然而,由于我是在前端使用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)

我有以下错误(荷兰):

Uncatt Error: NOT_FOUND_ERR: DOMLY 8

我认为,这里的问题是:

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

because this wraps each template output in "quotes" i.e.

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

rather than:

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

但是,我对我究竟做什么是错的,有一点是心理障碍。

Answer 1

为此,我更仔细地在梅西里网站学习榜样,结果如下:

.
.
.
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())

友情链接