如何在流星中實現無限滾動？

Question

我有很多圖像縮略圖存儲在mongodb中，我想在客戶端上使用無限滾動技術來呈現圖像縮略圖：顯示第一批圖像（即它們的4行）以及用戶滾動到最後一行時該批次，向客戶端發送一批新的內容。

使用流星可以實現這個嗎？

Answer 1

使用數據驅動的圖像。

Images.insert({data:image.toBase64()}); 

模板可能看起來像：

<img id="{{_id}}" src="data:image/jpg;base64,{{{data}}}"></img> 

和輸出會是什麼樣子：

<img id="..." src="data:image/jpg;base64,iVBO..."></img> 

要產生這種效果：

1. 生成的圖像隱藏容器。
2. 註冊一個DOM變異觀察者（例如observer-summary），只要圖像被添加到隱藏的容器就會觸發。
3. 當DOM突變觀察檢測放置到容器中一個新的圖像元素：
   1. 複製的元件成可見Masonry容器，或用來使圖像的無限滾動容器的任何常規方法。
4. 當用戶滾動到頁面底部：
   1. 更新應該出現的圖像列表。這將反應性地將圖像加載到隱藏的容器中。
   2. ...它們將被動地將它們放入可見容器中。

有了這個程序，你沒有寫任何複雜的Meteor.template.rendered代碼。

另外，

Meteor.autorun(function() { 
    var visibleImages = Session.get("newImages"); 
    _.each(visibleImages,function(image) { 
     $("#container").append("<img src='" +image.data + "'></img>"); 
    }); 
}) 

...並把文件導入newImages會話變量每當有新的圖像。