8

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

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

奖励任务:

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

我正在考虑如何以 Meteor 方式编写该逻辑。让我们跳过用户界面代码,我只对业务逻辑感兴趣。

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

问题:

  • 如何在客户端之间有不同的 ProductsDisplayed 集合,
  • 如何从 Products 集合中查询下 20 个产品,而不是之前的产品

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

更新!
我改变了只使用 Products 集合的方法。

服务器:

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

客户:

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

并在达到滚动点时增加 20 个会话“productsDisplayedNumber”。但是自动订阅会重新渲染整个模板,而不仅仅是新元素。有任何想法吗?

4

1 回答 1

5

我终于解决了这个问题。解决方案是让客户只收集,像这样:

# 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 {}

所以你怎么看?

于 2013-02-07T16:16:11.713 回答