10

私は角流星にadminのためのページを構築しています。多数のレコードのミニゴンからの問い合わせがブラウザにぶら下がってブラウザがハングします

私はコレクションから公表すべてのレコードを持っている:「投稿を」とフロントエンド上のすべてのレコードの購読をとっています。

コントローラで
$meteor.subscribe('posts'); 

、私はそれはのように正常に動作しますminimongoからすべてのレコードのカーソルを選択した場合:

$scope.posts = $meteor.collection(Posts); 

しかし、私は一度に制限されたレコードを望むそのためので、改ページを表示したいですlike:

$scope.posts = $meteor.collection(function(){ 

     return Posts.find(

      {}, 
      { 
       sort: {'cDate.timestamp': -1}, 
       limit: 10 
      } 
     ); 
    }); 

これはminimongoのクエリでスタックされます。そして、ブラウザがハングします。

投稿」コレクションには500レコードしか含まれていません。私は200のレコードを持っていたときにうまくいきました。

誰も私のコードと概念に何が間違っているのでしょうか?

EDIT:

大丈夫!私はこのようなクエリから$ソート行コメントしたときにそれがうまく働いた:

$scope.posts = $meteor.collection(function(){ 

      return Posts.find(

       {}, 
       { 
        //sort: {'cDate.timestamp': -1}, 
        limit: 10 
       } 
      ); 
     }); 

をしかし、私はレコードをソートする必要があります。だから私は今何をすべきか?

EDIT:

db.Posts.ensureIndex({"cDate.timestamp": 1}) 

それでも同じ問題:

はまた、このようなソート属性にインデックスを追加してみました。

+0

cDate.timestampフィールドにインデックスを追加しようとしましたか?この記事で説明したようにインデックスを追加してください、http://stackoverflow.com/questions/9730136/how-to-create-a-nested-index-in-mongodb 'db.Posts.ensureIndex({" cDate.timestamp ":1 }) ' – Kishor

+0

これを試してみましょう – StormTrooper

+0

インデックスを追加しようとしましたか?動作しません。同じ問題。ブラウザが止まっています – StormTrooper

答えて

2

キャッシュが読み込まれる前にキャッシュにロードできるデータが非常にあるため、ブラウザがクラッシュする。多数のドキュメントを要求する必要がある場合に何が起こるかについての質問には、そのプロセスをクライアントから離れ、最適化されたパブリッシュとサブスクライブのメソッド/呼び出しによってサーバー上で行うことができます。 minimongoの便利さは、小さなデータセットや、サーバーとすぐに同期する(またはこれまで同期する)必要がないため、大量のドキュメントをブラウザのキャッシュにロードする本当の理由はありません。

+0

クライアントよりもページ分割をどのように表示するか教えてください。すべてのレコードの反応カウンタをどのように表示しますか?または、完全なデータベースから検索するフィルタをどのように適用しますか? – StormTrooper

+0

非常に可能です。まず、最初のケースでどのように投稿を購読するかを決定します。あなたがミニゴンから離れるように聞こえます(これは間違いなくメテオのベストプラクティスに沿っています)。 –

+0

サーバー/クライアントを使用する場合Collection:テンプレートレベルまたはルータレベルで購読していますか?どのルータを使用しますか?すべての文書を公開し、サブスクリプションでフィルタリングしていますか?ページネーションに入る前に、まずこれらを処理する必要があります。あなたのコードをここでやるのが好きな人もいます - あなたがどこにいるのかについての抜粋を私たちに提供できるかどうかを見たいと思っています。上記のコンセプトに助けが必要な場合は、別の話ですが、私はあなたがそれを行うことができると思います! –

2

あなたは、ソートとリミットの戦略を検討する必要が探しているものを見つけることができ、サーバー側で並べ替える必要があります:あなたがしている場合、サーバー上の

ソートすべてのクライアントによって使用される大きなセットからトップ値を抽出します。しかし、通常は、データを必要とするユーザによって最初にフィルタリングし、フィルタリングされたコレクションをソートします。それはデータセットを減らすでしょう。

次に、ソートされた/限定されたサブセットをクライアントにパブリッシュします。そこでは、より細かい粒度/ソートのフィルタリングを行うことができます。

3
は、クライアント側では、この

Meteor.publish('posts', function (pageNumber) { 
    var numberOfRecordsPerPage = 10; 
    var skipRecords = numberOfRecordsPerPage * (pageNumber - 1); 
    return Post.find({ 
     "user_id": user_id 
    }, { 
     sort: { 'cDate.timestamp': -1 } 
     skip: skipRecords, 
     limit: numberOfRecordsPerPage 
    }); 
}); 

ようpageNumberと呼ばれるパラメータを受け入れるようにパブリケーションを変更し

、私は多くの角度-流星では動作しませんでした。 this.pageNumberまたは$scope.pageNumberを使用して現在のスコープの下にpageNumberプロパティを作成できます。ページ番号をクリックするたびにこのpageNumber変数を更新してください。この変数が変更されると、現在のページ番号を使用して購読します。

標準のブレーズテンプレートを使用している場合は、このようなautorunの反応型のvarまたはセッション変数を使用して行います。テンプレートのHTMLで :

<template name="postsTemplate"> 
    <ul> 
     <!-- you would want to do this list based on total number of records --> 
     <li class="pagination" data-value="1">1</li> 
     <li class="pagination" data-value="2">2</li> 
     <li class="pagination" data-value="3">3</li> 
    </ul> 
</template> 

テンプレートJSでは:それはブラウザがクラッシュすることはありませんので、

Template.postsTemplate.created = function() { 
    var template = this; 
    Session.setDefault('paginationPage', 1); 
    template.autorun(function() { 
     var pageNumber = Session.get('paginationPage'); 
     Meteor.subscribe('posts', pageNumber); 
    }); 
} 

Template.postsTemplate.events(function() { 
    'click .pagination': function (ev, template) { 
     var target = $(ev.target); 
     var pageNumber = target.attr('data-value'); 
     Session.set('paginationPage', pageNumber); 
    } 
}); 

このように、あなたは、クライアント上の任意の時点で10のレコードの最大を持っています。また、あなたがこの

Meteor.publish('posts', function (pageNumber) { 
    var numberOfRecordsPerPage = 10; 
    var skipRecords = numberOfRecordsPerPage * (pageNumber - 1); 
    return Post.find({ 
     "user_id": user_id 
    }, { 
     sort: { 'cDate.timestamp': -1 } 
     skip: skipRecords, 
     limit: numberOfRecordsPerPage, 
     fields: {'message': 1, 'createdBy': 1, 'createdDate': 1 } //The properties inside each document of the posts collection. 
    }); 
}); 

のようなものを使用してクライアントに送信フィールドを制限する場合がありますそして最後に、あなたは、改ページのリンクを表示するために、クライアント側でポストコレクション内のレコードの合計数が必要になります。あなたはそれが別の出版物を使用し、公式ドキュメントhere

// server: publish the current size of a collection 
Meteor.publish("posts-count", function() { 
    var self = this; 
    var count = 0; 
    var initializing = true; 

    // observeChanges only returns after the initial `added` callbacks 
    // have run. Until then, we don't want to send a lot of 
    // `self.changed()` messages - hence tracking the 
    // `initializing` state. 
    var handle = Posts.find({}).observeChanges({ 
    added: function (id) { 
     count++; 
     if (!initializing) 
     self.changed("postsCount", 1, {count: count}); 
    }, 
    removed: function (id) { 
     count--; 
     self.changed("postsCount", 1, {count: count}); 
    } 
    // don't care about changed 
    }); 

    // Instead, we'll send one `self.added()` message right after 
    // observeChanges has returned, and mark the subscription as 
    // ready. 
    initializing = false; 
    self.added("postsCount", 1, {count: count}); 
    self.ready(); 

    // Stop observing the cursor when client unsubs. 
    // Stopping a subscription automatically takes 
    // care of sending the client any removed messages. 
    self.onStop(function() { 
    handle.stop(); 
    }); 
}); 

// client: declare collection to hold count object 
PostsCount = new Mongo.Collection("postsCount"); 

// to get the total number of records and total number of pages 
var doc = PostsCount.findOne(); //since we only publish one record with "d == 1", we don't need use query selectors 
var count = 0, totalPages = 0; 

if (doc) { 
    count = doc.count; 
    totalPages = Math.ceil(count/10); //since page number cannot be floating point numbers.. 
} 

これが役に立てば幸いで述べたようにobserveChanges概念を使用して行うことができます。

2

クライアント側の代わりにサーバー側の制限を使用する必要があります。それはあなたのアプリをより速く、最適化します。

詳細については、このリンクをご確認ください。 link here

関連する問題