0

を使用して無限スクロールを実装するとき、私は頻繁にこのチュートリアルの影響を受けて無限スクロール効果を実装しています:DOM例外8エラー口ひげテンプレート&jqueryの石工に

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) 

を私は次のエラー(クローム)を取得:

不明なエラー:NOT_FOUND_ERR:DOM例外8

を私は問題があると思いますここで:

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

これは、各テンプレートの出力を「quot ES」、すなわち

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

いうより:

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

しかし、私は私が間違っているのかについて精神的なブロックのビットを持っています....誰が支援する気?

答えて

0

私はこれをもたらした、これはより密接に石積みのウェブサイト上の例を以下で動作するようになった:

. 
. 
. 
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()) 
関連する問題