你将如何建立Pinterest的喜欢与meteor.js页(how would you build

我希望在座的各位知道Pinterest的风格布局，其行为：

• 我们有很多的集合（假设1000）产品
• 在页面加载，我们显示采集的只有很少的子集（即20的第一批产品）
• 当用户滚动下来，到达网页的底部，我们给予未来20个产品
• 网页是由许多客户认为，每个都有自己的一套显示产品

任务奖励：

• 当产品收集得到新的项目，它们显示在页面顶部（如展示的产品列表中第一项）

我在想如何在流星的方式，逻辑程序 。 让我们跳过用户界面代码，我只关心业务逻辑。

我在想ProductsDisplayed集合作为帮手，里面是空的，并通过20种产品在页面加载填充，然后到达滚动点的时候，我插入20种产品更从原来的产品收集等。

问题：

• 如何让客户端之间不同ProductsDisplayed集合，
• 如何要求从产品收集未来20种产品，并没有得到以前的

但也许关于ProductsDisplayed整个想法是错误的。 我很想知道你的想法！

更新！
我改变了方法只使用产品的集合。

服务器：

Meteor.publish "productsDisplayed", (number) ->
  Products.find {},
    limit: number

客户：

Meteor.autosubscribe ->
  Meteor.subscribe "productsDisplayed", Session.get('productsDisplayedNumber')

当滚动点达到了20届“productsDisplayedNumber”递增。 但是autosubscribe使得整个模板重新呈现，不仅是新的元素。 有任何想法吗？

Answer 1:

我终于解决了这个问题。 该解决方案是让客户端只集合，这样的：

# on client
# client side only collection
ProductsDisplayed = new Meteor.Collection(null)

那么到达滚动点时要求服务器为接下来的N（ limitNo ）产品

# on client
Meteor.call 'getProducts', limitNo, skipNo, (err, products) =>

  _.each products, (item, index) =>
    # get rid of _id
    delete item._id

    ProductsDisplayed.insert( item )

skipNo由N递增，总是问下一组数据。 而在服务器端，我有：

# on server
Meteor.methods
  getProducts: (limitNo, skipNo) ->

    productsCursor = Products.find( {}, {
      limit: limitNo,
      skip: skipNo
    })

    productsCursor.fetch()

这个流星方法返回我接下来的一系列从产品集合产品。

当然视图模板显示ProductsDisplayed集的内容：

Template.products.products = ->
  ProductsDisplayed.find {}

所以你怎么看？

文章来源: how would you build pinterest like page with meteor.js