Question

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

我的申请中与此问题相关的页面是https://gnf.meteor.com/log。此页面包含网站上最新捐款，捐赠者，类型，金额和收件人的日志。

当您首次在/ log处加载或重新加载页面时，Meteor在呈现正确数据之前需要7到10秒的时间。在此间隔期间，它首先显示一个空列表，然后几秒后它将显示一些较旧的记录（不是最新数据），然后最终将使用正确的记录重新呈现。我猜测集合可能会被渲染，然后排序，然后重新渲染，但我不知道它是否真的是一个排序问题，它可能只是先加载旧记录，在它完成加载之前渲染。

为了证明我的意思，请加载页面并观察撰写本文时最新的捐赠（列表顶部）应为“Maura M. $ 70 - ＆gt; Suzie Murphy”。（此应用程序尚未大量使用，因此暂时仍将是最新的交易。）

如果可能的话，我想避免这种情况，并且我还计划根据this question的提问者的要求引入加载消息。

我也讨厌首先加载需要很长时间，即使我的交易集合中只有大约300条记录。也许我能以某种方式以更有效的方式实现相同的查询？

以下是我的申请中的相关代码：

在我的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中：

<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>

提前感谢任何人可能拥有的任何洞察力。流星很棒，但这些小烦恼使我感到沮丧。

Answer 1

为您的问题提出一些建议

1）编辑服务器端发布功能（我假设你有这个并且没有使用autopublish包）只使用时间戳进行排序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的内容来推广自己的解决方案，但我建议使用带有waitOn函数的iron-router来处理问题https://github.com/EventedMind/iron-router#waiting-on-subscriptions-waiton中的路由，当它与{{1}结合使用时您可以在加载时创建一个很好的（正在加载....）消息，然后立即转换到完全填充的模板

Meteor - 模板中的{{#each}}首先加载旧数据，然后重新加载

1 个答案: