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 回答