我在 gnf.meteor.com 上有一个 Meteor 应用程序,用于我家商店运行的一个项目中的捐赠事件。该应用程序本身与这个问题不太相关,但它提供了简单的信用卡结帐功能,可以连接到 Paypal ,并为我们跟踪生成的交易日志和余额。
我的应用程序中与此问题相关的页面是 https://gnf.meteor.com/log 。此页面记录了网站上最新的捐款、捐款人、类型、金额和接受者。
当您首次加载或重新加载/log 处的页面时,Meteor 需要 7-10 秒才能呈现正确的数据。在此间隔期间,它首先显示一个空列表,然后几秒钟后它将显示一些较旧的记录(不是最新的数据),最后它将使用正确的记录重新呈现。我猜测集合可能会被渲染,然后排序,然后重新渲染,但我无法判断这是否真的是一个排序问题,它可能只是先加载旧记录,在加载完成之前渲染。
为了证明我的意思,请加载页面并观察撰写本文时的最新捐赠(列表顶部)应该是“Maura M. $70 -> 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> </h1>
{{#each latestDonations}}
<h2>
{{donorName}}
{{#if typeDonation}}
<i class="fa fa-credit-card"></i>
{{/if}}
{{#if typeDeposit}}
<i class="fa fa-money"></i>
{{/if}}
${{amount}} <i class="fa fa-arrow-right"></i>
<a href="/fund/{{fund_id}}">{{recipientName}}</a>
<small><abbr class="timeago" title="{{donationTimestamp}}">
{{donationTimeString}}</abbr>
</small>
</h2>
{{/each}}
</template>
预先感谢任何人可能有的见解。 Meteor 很棒,但这些小烦恼让我感到沮丧。
最佳答案
针对您的问题的一些建议
1)编辑您的服务器端发布功能(我假设您有这个功能并且没有使用自动发布包)以仅使用时间戳进行排序发布 50 个。这将向客户端发送更少的数据,并且仅发送您实际要使用的数据。您只需将查找查询移动到可能有不带任何属性的查找查询的服务器 .find({})
2) Hook 到集合的 .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 ,当与 loadingTemplate
选项结合使用时,您可以在加载时生成一条漂亮的(正在加载....)消息,然后立即转换到完全填充的模板
关于javascript - Meteor - 模板中的 {{#each}} 首先加载旧数据,然后重新加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22313191/