您将如何使用meteor.js 构建类似pinterest 的页面 [英] how would you build pinterest like page with meteor.js

问题描述

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

I hope all of you know the pinterest style layout and its behaviour:

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

奖励任务:

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

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

I am thinking how to program that logic in Meteor way. Let's skip user interface code, I am interested only in business logic.

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

I am thinking about ProductsDisplayed collection as helper, which is empty and populated by 20 products on page load, then when scrolling point is reached, I insert 20 products more from original Products collection etc.

问题:

• 如何在客户之间拥有不同的 ProductsDisplayed 集合，
• 如何从 Products 集合中查询接下来的 20 个产品，而不是获取之前的

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

But maybe the whole idea about ProductsDisplayed is wrong. I would love to know what do you think!

更新！
我改变了只使用 Products 集合的方法.

Update!
I changed approach to using only Products collection.

服务器:

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

客户:

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

并在到达滚动点时增加 20 个会话 'productsDisplayedNumber'.但是自动订阅使整个模板都重新渲染，而不仅仅是新元素.有什么想法吗?

and incrementing by 20 Session 'productsDisplayedNumber' when scrolling point reached. But autosubscribe makes that the whole template is rerendered, not only the new elements. Any ideas?

推荐答案

我终于解决了这个问题.解决方案是只有客户端集合，就像这样:

I finally solved this problem. The solution is to have client only Collection, like that:

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

然后当到达滚动点时向服务器询问接下来的 N (limitNo) 个产品

then when scrolling point is reached ask server for next N (limitNo) products

# 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 递增，以始终请求下一组数据.在服务器端我有:

skipNo is incremented by N, to always ask for next set of data. And on server side I have:

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

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

    productsCursor.fetch()

这个 Meteor 方法从 Products 集合中返回下一组产品.

this Meteor method returns me next set of products from Products collection.

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

Of course view template displays ProductsDisplayed collection content:

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

那你怎么看?

这篇关于您将如何使用meteor.js 构建类似pinterest 的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！