Question

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

我们收集了很多（比方说1000个）产品
在页面加载时，我们只显示该集合的小部分（即20个第一产品）
当用户向下滚动并到达页面底部时，我们会渲染下20个产品
页面被许多客户查看，每个客户都有自己的一组展示产品

奖金任务：

当产品系列获得新项目时，它们会显示在页面顶部（作为显示的产品列表中的第一项）

我在想如何用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方法返回了Product系列的下一组产品。

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

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

那么，您怎么看？

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

1 个答案: