Büyük bir veri kümesini tek seferde yüklemek zorunda kalmamak için Meteor'da sonsuz kaydırmayla yüklenen bölümlere ayırmak istediğim geniş bir veri kümesine sahibim ; bunun yerine, gerektiğinde veri kümesinin parçalarını yüklerdim. infinite scroll ile yüklenen her bölümdeki canlı sayfa güncellemelerini korurken bunu nasıl yaparım?Meteor'da sonsuz kaydırma ve gerçek zamanlı güncelleştirmeler yapmanın ideal yolu
Bir film veritabanı oyun alanı için kullanıyorum kod İşte. JQuery olaylarını denedim, ancak sonunda verilerin sürekli olarak aktarılmasının yeterli olduğuna karar verdim. Test koleksiyonum, 20 alan ve kapak başına 10-20kb arasında olan bir küçük resim alanı olan 680 kayıt. İşte CoffeeScript kodu:
Movies = new Meteor.Collection("movies")
if Meteor.isClient
# starting with 10 items that the user sees a page fast
Session.set("queryLimit", 10)
# getting the item count from the server collection
Meteor.call 'getMoviesCount', (err, result) =>
Session.set('itemsInQuery',result)
# subscribe to a subset of the collection, and change the Session var on completion
# automatically changing the limit of the publishing function with autorun
Meteor.autorun ->
Meteor.subscribe "MoviesList", Session.get("queryLimit"), onComplete = ->
if Session.get("queryLimit") < Session.get('itemsInQuery')
queryLimit = Session.get("queryLimit") + 30 #change iterator depending on result size
Session.set("queryLimit", queryLimit)
# Client helper to add more items to handlebars template
Template.app.helpers movies: ->
Movies.find({})
if Meteor.isServer
Meteor.publish "MoviesList", (limit) ->
# show whole collections once limit is reached, by setting limit to 0
limit = 0 if limit > Movies.find().count()
console.log new Date(), limit
Movies.find({}, { limit: limit, fields: {title:1 } }) #use fields to test different result sizes
Meteor.methods
getMoviesCount: (query) ->
return Movies.find().count()
Ve html:
<body>
{{> app}}
</body>
<template name="app">
{{#each movies}}
<p>{{title}}</p>
{{/each}}
</template>
Biraz hızlı performans test yaptım ve çıkıyor bu rekor, veri göndermek için hızlı yolu başına metnin birkaç hatlar için İstemci 100 civarında bir sınırdır. Dosyada gömülü olan 10-20kb küçük resimlerle de denedim. Daha büyük varlıklar kullanırken, sınır 30 kayıttan büyük olduğunda Chrome yanıt vermemeye başladı. localhost üzerinde yapılan İşte birkaç istatistik (3x her koşmak):
limit seconds till last record rendered.
0 79s
010 121s
020 64s
030 45s
050 34s
100 16s
200 16s
Meteor sunucusu tek seferde (sınır = 0) 'de tüm sayfayı gönderdiğinde etrafında 79 saniye sürede olması ilginçtir bu. Emin değilim, bu nasıl mümkün olabilir, çünkü sürekli bir akış en hızlı olmalı. Yani muhtemelen istatistiklerimle komik bir şey var. Herhangi bir fikir?
Şu anda bulunduğunuz sayfayı depolayan bir oturum anahtarı ayarlayabilirsiniz. örneğin
Session.set("cur_page", 1);
Ve sonra sorguya bunu yedir: Bir şey gibi
Template.list.items = function() {
return Collection.find({}, {
skip: Session.get("cur_page") * page_size,
limit: page_size
});
}
Sonra sadece Session.set("cur_page", 2) ile değerini güncellemek ve liste sayfası 2. Tadaa için öğelerle çizer!
Henüz denemedim, ama işe yaramalı.
var Posts = new Meteor.Collection("posts");
Ve şablonu: Eğer Collection varsa Yani,
<template name="posts">
{{#each posts}}
{{> post}}
{{/each}}
</template>
Bu şablon yardımcı olabilir: PAGE_SIZE "başına mesajların miktarıdır
Template.posts.helpers({
posts: function() {
return Posts.find({}, {limit: Session.get("current_page")*PAGE_SIZE});
}
});
sayfa". Kullanıcı sayfanın en altına gittiğinde, "current_page" oturum değişkenini artırmanız gerekir. Sonra şablon güncellenecek ve sizin innnit kaydırma (umarım) çalışır!
Benim çözümüm Andrej'inkiyle benzer.Ben veritabanındaki kayıtların bir sürü var çünkü sunucuda bende bu yüzden , benim sunucu hepsini birden göndermek istemiyoruz:
Meteor.publish("items", function(page) {
if(!page)
page = 1;
var limit = 30 * page;
return Items.find({}, {limit: limit};
}
Müşteri:
Template.templateName.items = function() {
Meteor.subscribe("items", Session.get("page"));
return Items.find({});
}
Ve jQuery
: Ayrıca şablon oluşturuldu callback'inde sayfa ilk sayfayı ayarlamak için$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height()-$(window).height()){
Session.set("page", Session.get("page") + 1);
}
});
: sayfa altına aldık IF_FUNCTION gözlemlemek
Template.templateName.created = function() {
Session.setDefault("page", 1);
};
Ve şablonda kullanıyorum bu öğeleri gösteriyorum {{#each}} Ayrıca, artık kayıt şablon oluşturulduğunda
iyi çözüm 30 göstermek olacak olup olmadığını kontrol etmek zorunda ve Bundan sonra 30 daha fazla kaydırma elde etmek için, ama onları nasıl göstereceğimi bilmiyorum. Bir çözüm bulabilirim, ama uygulamak için tembelim çünkü işe yarayıp yaramadığından emin değilim. İşlenen html'yi ekleme hakkında düşünmüyorum
Sonuç kümesi boyutuna bağlı olarak, skip() 'her zaman ideal çözüm olmadığı, başka bir çözümün ise" skip() "öykünmesi yapmak için aralık sorgularını kullanması gerektiğine dikkat edilmelidir. daha fazla sayfa için kayıtları süslemek için dizin kullanımı kaybı olmadan. – Sammaye
Sadece paginasyonun yanlış kelime olduğunu anladım. Teknik olarak "sayfalar" ya da sayfanın alt kısmına her vurduğunuzda yüklenen veri bölümleri olduğu gibi, ancak hala güncellemelerin olması gerekip gerekmediğini görmek için güncellemelerinizin yapılması gerektiğine inanıyorum. sayfanın altında veya üstünde. Bunu açıklığa kavuşturmak için soruyu düzenleyeceğim. – HGandhi