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

Javascript Meteor-{{#each}模板中的Meteor首先加载旧数据,然后重新加载,javascript,performance,mongodb,templates,meteor,Javascript,Performance,Mongodb,Templates,Meteor,我在gnf.Meteor.com上有一个Meteor应用程序,用于我家人的商店运行的一个项目中的捐赠活动。该应用程序本身与这个问题不太相关,但它提供了简单的信用卡签出功能,可以连接到paypal,并为我们跟踪生成的交易日志和余额 我申请表中与此问题相关的页面是。此页面记录了网站上的最新捐赠、捐赠者、类型、金额和接收者 当您第一次在/log加载或重新加载页面时,Meteor需要7-10秒才能呈现正确的数据。在此间隔期间,它首先显示一个空列表,然后几秒钟后它将显示一些较旧的记录(不是最新的数据),最

我在gnf.Meteor.com上有一个Meteor应用程序,用于我家人的商店运行的一个项目中的捐赠活动。该应用程序本身与这个问题不太相关,但它提供了简单的信用卡签出功能,可以连接到paypal,并为我们跟踪生成的交易日志和余额

我申请表中与此问题相关的页面是。此页面记录了网站上的最新捐赠、捐赠者、类型、金额和接收者

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

为了证明我的意思,请加载页面并观察撰写本文时的最新捐赠(列表顶部)应该是“Maura M.$70->Suzie Murphy”。(此应用程序尚未被大量使用,因此在一段时间内,它将一直是最新的事务。)

如果可能的话,我希望避免这种情况,并且我还计划根据的询问者的需要引入一个加载消息

我还讨厌一开始就要花这么长时间加载,即使我的事务集合中只有大约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>

最近50次捐款(实时更新)
{{{#每次最新捐款}
{{donorName}
{{{#如果类型捐赠}
{{/if}
{{#如果类型存款}
{{/if}
${{amount}
{{donationTimeString}}
{{/每个}}

提前感谢您提供的任何见解。Meteor很棒,但这些小烦恼让我很沮丧。

给你的问题提几点建议

1) 编辑您的服务器端发布功能(我假设您有这个功能,并且没有使用autopublish软件包),使用时间戳来排序,只发布50。这将向客户端发送较少的数据,而只发送实际要使用的数据。您只需将find查询移动到服务器,在那里可能有一个没有任何属性的find查询
。find({})


2) 钩住集合的
.ready()
方法,以确定何时可以显示它。当所有数据加载到客户机上时,这将返回true。您看到的是空的,然后是部分的,然后是完整的呈现,因为您的代码没有等待所有数据,而是在数据到达时呈现。这不是一件坏事,但并不总是可取的。您可以使用类似的方式推出您自己的解决方案,但我建议对所讨论的路由使用带waitOn功能的iron router,当它与
loadingTemplate
选项结合使用时,您可以在加载时生成一条漂亮的(加载…)消息,然后立即过渡到完全填充的模板

非常感谢!我已经在使用iron router,所以我肯定会使用waitOn函数,我不知道。至于更改我的发布函数,对于不同的视图,它是如何工作的?我需要为其他显示的页面发布整个集合,即基金的整个交易历史。我是否可以将所有收藏发布到一个模板,将部分收藏发布到另一个模板?是的,准确地说-只需以不同的方式命名出版物-您可以拥有同一收藏的多个出版物,meteor将在客户端将其合并-流行模式将有两个出版物,如
recentTransactions
(最近50个)和
fundDetails
(基金+该基金的所有交易-有关在1次发布中从集合返回2+查询结果的信息,请参阅)-为了进一步优化,您可以使用
字段
属性仅向下发送每个出版物所需的内容-然后您可以将每个出版物附加到特定模板/routeOk!对不起,我还在学流星。如何将特定出版物附加到路由?使用
waitOn
附加订阅,然后使用
data
返回查询结果-请参阅