你会如何用meteor.js建立像页面一样的pinterest

Question

我希望大家都知道pinterest样式布局及其行为:

• 我们收集了许多(比方说1000)产品
• 在页面加载时,我们只显示该集合的一小部分(即20个第一产品)
• 当用户向下滚动并到达页面底部时,我们将呈现下20个产品
• 页面由许多客户端查看,每个客户端都有自己的一组显示的产品

奖金任务:

• 当Products集合获取新项目时,它们将显示在页面顶部(作为显示的产品列表中的第一项)

我在想如何用Meteor方式编写逻辑.让我们跳过用户界面代码,我只对业务逻辑感兴趣.

我正在考虑将ProductsDisplayed集合作为帮助器,它是空的并且在页面加载时由20个产品填充,然后当达到滚动点时,我从原始产品集合中插入20个产品等.

问题:

• 如何在客户端之间使用不同的ProductsDisplayed集合,
• 如何从产品系列中询问下20种产品,而不是之前的产品

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

更新!
我改变了只使用Products系列的方法.

服务器:

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

客户:

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

当达到滚动点时,递增20个Session'productsDisplayedNumber'.但是自动订阅使得整个模板被重新渲染,而不仅仅是新元素.有任何想法吗？

Answer 1

我终于解决了这个问题.解决方案是让客户端只有Collection,就像那样:

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

这个Meteor方法从Products系列返回下一组产品.

当然,视图模板显示ProductsDisplayed集合内容:

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

所以你怎么看？