How would you create pinterest like a page with meteor.js

Question

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

• we have a collection of many (say 1000) products
• When loading the page, we display only a small subset of this collection (i.e. the first 20 products).
• When the user scrolls down and reaches the bottom of the page, we make the following 20 products.
• viewed by many customers, and each of them has its own set of displayed products.

Bonus Challenge:

• When new items appear in the product collection, they appear at the top of the page (as the first items in the list of displayed products).

I think how to program this logic in the Meteor method . Let it skip the user interface code, I'm only interested in business logic.

I think of the ProductsDisplayed collection as an assistant that is empty and filled with 20 products when the page loads, and then when the scroll point is reached, I insert 20 more products from the original product collection, etc.

Problems:

• how to have different products. Display collections between customers,
• how to request the next 20 products from the product collection and not receive the previous ones.

But perhaps the whole idea of ​​ProductsDisplayed is wrong. I would like to know what you think!

Update
I changed the approach to using only a collection of products.

Server:

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

client:

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

and increases by 20 sessions of 'productsDisplayedNumber' when the scroll point is reached. But autosubscribe makes the whole template re-elected, not just new elements. Any ideas?

Answer 1

I finally solved this problem. The solution is to have only a client collection, for example:

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

then when the scroll point is reached, request a server for the following products 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 incremented by N to always query for the next data set. And on the server side I have:

 # on server Meteor.methods getProducts: (limitNo, skipNo) -> productsCursor = Products.find( {}, { limit: limitNo, skip: skipNo }) productsCursor.fetch() 

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

Of course, the ProductDisplayed collection template templates are displayed:

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

So what do you think?