2013-02-05 11 views
8

साथ पेज की तरह Pinterest का निर्माण होगा मैं आप सभी जानते हैं कि उम्मीद Pinterest शैली लेआउट और अपने व्यवहार:कैसे आप meteor.js

  • हम का संग्रह है कई उत्पादों
  • पृष्ठ पर
  • (की 1000 मान लीजिए) लोड हम उस संग्रह का केवल छोटा सबसेट प्रदर्शित करते हैं (यानी 20 पहले उत्पाद)
  • जब उपयोगकर्ता नीचे स्क्रॉल करता है और पृष्ठ के नीचे पहुंचता है, तो हम अगले 20 उत्पाद
  • पृष्ठ कई क्लाइंट द्वारा देखे जाते हैं, और प्रत्येक का अपना सेट होता है प्रदर्शित उत्पादों की

बोनस कार्य:

  • जब उत्पाद संग्रह नए आइटम हो जाता है, वे पेज के शीर्ष पर प्रदर्शित किए जाते

मैं सोच रहा हूँ कैसे कार्यक्रम (प्रदर्शित उत्पादों सूची में पहले आइटम के रूप में) उल्का मार्ग में वह तर्क। आइए यूजर इंटरफेस कोड छोड़ दें, मुझे केवल बिजनेस लॉजिक में दिलचस्पी है।

मैं जो खाली और 20 उत्पादों पृष्ठ लोड पर की आबादी है सहायक के रूप में ProductsDisplayed संग्रह, के बारे में सोच रहा हूँ, तो जब स्क्रॉल बिंदु पर पहुंच गया है, मैं 20 उत्पादों मूल उत्पाद संग्रह से अधिक डालने आदि

समस्याएं:

  • कैसे ग्राहकों के बीच अलग अलग ProductsDisplayed संग्रह करने के लिए,
  • अगले 20 उत्पादों उत्पाद संग्रह से लिए पूछने के लिए कैसे, और पिछले वाले नहीं मिलता

लेकिन शायद उत्पाद डिस्प्लेड के बारे में पूरा विचार गलत है। मुझे यह जानना अच्छा लगेगा कि आप क्या सोचते हैं!

अद्यतन!
मैंने केवल उत्पाद संग्रह का उपयोग करने के लिए दृष्टिकोण बदल दिया।

सर्वर:

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

ग्राहक:

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

और 20 सत्र 'productsDisplayedNumber' से incrementing जब स्क्रॉल बिंदु पर पहुंच गया। लेकिन स्वामित्व यह है कि पूरे टेम्पलेट को न केवल नए तत्वों को पुनः प्रस्तुत किया जाता है। कोई विचार?

+0

अच्छा ऐप! एक वास्तविक उल्का ऐप देखना अच्छा है! –

उत्तर

5

मैंने अंततः इस समस्या को हल किया। फिर जब स्क्रॉल बिंदु तक पहुँच जाता है (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 client 
# client side only collection 
ProductsDisplayed = new Meteor.Collection(null) 

, हमेशा पूछने के लिए: समाधान ग्राहक की तरह ही संग्रह है, है डेटा के अगले सेट के लिए।और सर्वर की तरफ मेरे पास है:

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

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

    productsCursor.fetch() 

यह उल्का विधि मुझे उत्पाद संग्रह से उत्पादों का अगला सेट देता है।

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

तो, तुम्हें क्या लगता है:

कोर्स को देखने टेम्पलेट प्रदर्शित करता है के

संग्रह सामग्री ProductsDisplayed?

+0

अपना खुद का प्रश्न अपडेट करने के लिए धन्यवाद! – stereoscott

संबंधित मुद्दे