Geek Answers Handbook

Meteor - {{#each}} in the template first loads the old data, then reloads

I have a Meteor app on gnf.meteor.com for donation campaigns in a program run by my family store. The application itself is not too relevant to this issue, but it provides simple credit card checks that connect to PayPal and tracks the resulting transaction logs and balances for us.

In my app related to this question, the page is https://gnf.meteor.com/log . This page is a journal of the latest donations on the site, their donors, types, amounts and recipients.

When you load or reload the page in / log, Meteor takes a solid 7-10 seconds before displaying the correct data. During this interval, it first displays an empty list, then after a few seconds it displays some old records (not the latest data), and then finally it will re-display the correct records. I suppose that perhaps the collection will be rendered, then sorted, and then re-rendered, but I can’t say if this is really a sorting problem, and at first it can load old records, rendering before loading it.

To demonstrate what I mean, download the page and note that the last donation (at the top of the list) at the time of this writing should be "Maura M. $ 70 → Suzie Murphy". (This application has not yet been used heavily, so it will remain the last transaction for a while.)

I would like to avoid this if possible, and I also plan on submitting a boot message if I wish to scam this question .

I also hate that downloading takes a very long time, although there are only about 300 entries in my transaction collection. Maybe I can somehow achieve the same request in a more efficient way?

Here is the relevant code from my application:

in my javascript:

Data = {
  funds         : new Meteor.Collection('funds'),
  transactions  : new Meteor.Collection('transactions')
};

// ...

Template.logPage.latestDonations = function() {
  return Data.transactions.find({
    $or : [{ type : 'donation' }, { type : 'deposit' }]
  }, {
    sort : { timestamp : -1 },
    limit : 50
  });
};

Template.logPage.typeDonation = function() {
  return this.type == "donation";
};

Template.logPage.typeDeposit = function() {
  return this.type == "deposit";
};

in my HTML:

<template name="logPage">
  <h1 class="underline">Latest 50 Donations <small>(updates in real time)</small>&nbsp;&nbsp;</h1>
    {{#each latestDonations}}
        <h2>
            {{donorName}} &nbsp;
            {{#if typeDonation}}
                <i class="fa fa-credit-card"></i>
            {{/if}}
            {{#if typeDeposit}}
                <i class="fa fa-money"></i>
            {{/if}}
            &nbsp;${{amount}}&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
            &nbsp; <a href="/fund/{{fund_id}}">{{recipientName}}</a>
            <small><abbr class="timeago" title="{{donationTimestamp}}">
                {{donationTimeString}}</abbr>
            </small>
        </h2>
    {{/each}}
</template>

, . , .

+2
1

1) ( , , ), 50, . , . , , , - .find({})

2) .ready() , , . true, . , , , . , . , - https://github.com/oortcloud/unofficial-meteor-faq#how-do-i-know-when-my-subscription-is-ready-and-not-still-loading, iron-router waitOn https://github.com/EventedMind/iron-router#waiting-on-subscriptions-waiton, loadingTemplate, (....) ,

+2

More articles:


All Articles