Meteor - 模板中的 {{#each}} 首先加载旧数据，然后重新加载 [英] Meteor - {{#each}} in template loads old data first, then reloads

问题描述

我在 gnf.meteor.com 上有一个 Meteor 应用程序，用于在我家人商店运行的计划中进行捐赠活动.应用程序本身与这个问题不太相关，但它提供了简单的信用卡结账功能，可以连接到贝宝，并为我们跟踪生成的交易日志和余额.

I have a Meteor application at gnf.meteor.com for donation campaigns in a program being run by my family's shop. The application itself is not too relevant to this question, but it provides simple credit card checkouts which hook into paypal, and keeps track of the resulting transaction logs and balances for us.

我的应用程序中与此问题相关的页面是 https://gnf.meteor.com/log.此页面记录了网站上的最新捐款、捐款人、类型、金额和收件人.

The page in my application relevant to this question is https://gnf.meteor.com/log. This page is a log of the latest donations on the site, their donors, types, amounts and recipients.

当您第一次在/log 处加载或重新加载页面时，Meteor 需要 7-10 秒才能呈现正确的数据.在此间隔期间，它首先显示一个空列表，然后几秒钟后它会显示一些较旧的记录(不是最新数据)，最后它会重新呈现正确的记录.我猜也许集合被渲染，然后排序，然后重新渲染，但我不知道这是否真的是一个排序问题，它可能只是先加载旧记录，然后在加载完成之前进行渲染.

When you first load or reload the page at /log, Meteor takes a solid 7-10 seconds before it renders the correct data. During this interval, it first displays an empty list, then after a few seconds it will show some older records (not the latest data) and then finally it will re-render with the correct records. I'm guessing that maybe the collection gets rendered, then sorted, then re-rendered, but I can't tell if it's truly a sorting issue and it might just be loading old records first, rendering before it's done loading.

为了说明我的意思，加载页面并观察在撰写本文时最新的捐赠(列表顶部)应该是Maura M. $70 -> Suzie Murphy".(这个应用程序还没有被大量使用，所以它会在一段时间内保持最新的交易.)

To demonstrate what I mean, load the page and observe that the latest donation (top of the list) at the time of this writing should be "Maura M. $70 -> Suzie Murphy". (This application is not being used heavily yet, so that will remain the latest transaction for a while.)

如果可能的话，我想避免这种情况，并且我还计划根据 这个问题.

I'd like to avoid this if possible, and I'm also planning to introduce a loading message as desired by the asker of this question.

我也讨厌一开始加载需要很长时间，即使我的交易集合中只有大约 300 条记录.也许我可以以某种更有效的方式实现相同的查询?

I also hate that it takes so long to load in the first place, even though there are only about 300 records in my transactions collection. Maybe I can achieve the same query in a more efficient way somehow?

这是我的应用程序中的相关代码:

Here is the relevant code from my application:

在我的 Javascript 中:

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";
};

在我的 HTML 中:

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>

预先感谢任何人可能拥有的任何见解.流星很棒，但这些小烦恼让我很沮丧.

Thanks in advance for any insight anyone might have. Meteor is great, but these little annoyances frustrate me.

推荐答案

针对您的问题的一些建议

a couple suggestions for your problem

1) 编辑您的服务器端发布功能(我假设您有此功能并且没有使用自动发布包)以仅使用时间戳进行排序发布 50.这将向客户端发送更少的数据，并且只会发送您实际要使用的数据.你只需要将你的查找查询移动到你可能有一个没有任何属性的查找查询的服务器 .find({})

1) edit your server side publish function (i'm assuming you have this and are not using the autopublish package) to only publish 50 using the timestamp to sort. this will send less data to the client and only the data you actually are going to use. you just have to move your find query to the server where you likely have a find query without any attributes .find({})

2) 钩入集合的 .ready() 方法以确定何时可以显示它.当所有数据都加载到客户端时，这将返回 true.您看到的是空的，然后是部分的，然后是完整的渲染，因为您的代码不是在等待所有数据，而是在数据到达时进行渲染.这不是一件坏事，但并不总是可取的.您可以使用类似 https://github.com/oortcloud/unofficial-meteor-faq#how-do-i-know-when-my-subscription-is-ready-and-not-仍在加载 ，但我建议将铁路由器与 waitOn 功能用于相关路线 https://github.com/EventedMind/iron-router#waiting-on-subscriptions-waiton，当它与 loadingTemplate 结合使用时选项您可以在加载时制作一个漂亮的 (Loading....) 消息，然后立即转换到完全填充的模板

2) hook into the .ready() method of the collection to determine when you can show it. this will return true when all data is loaded on the client. you are seeing empty, then partial, then full rendering because your code isn't waiting for all data and is rendering as data arrives. this isn't a bad thing, but not always desirable. you can roll your own solution using something like https://github.com/oortcloud/unofficial-meteor-faq#how-do-i-know-when-my-subscription-is-ready-and-not-still-loading , but i would recommend using iron-router with the waitOn function for the route in question https://github.com/EventedMind/iron-router#waiting-on-subscriptions-waiton, when this is used in combination with the loadingTemplate option you can make a nice (Loading....) message while loading, then transition right away to the fully populated template

这篇关于Meteor - 模板中的 {{#each}} 首先加载旧数据，然后重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！