Meteor模板重新渲染期间的加载提示信息

Question

我建立了我的第一个Meteor应用程序，我非常喜欢它。但是，现在它有真实的生产数据，速度有点慢。我收到报告说“当我点击这个时什么都没有发生”。

有没有办法在模板重绘期间显示加载消息，以便用户知道正在发生一些事情？

为了进一步说明，请看这个模板（不是我的实际代码，只是为了简单起见）：

Template.all_posts.posts = function() {
  return Posts.find({'category_id': Session.get('current_category')});
}

所以，如果我打开控制台并运行 Session.set('current_category', 1)，假设计算和重绘模板需要2秒钟。在这2秒钟期间，我希望显示一个加载指示器。

明确一点，我已经知道如何显示加载指示器。事实上，在初始页面加载时，我已经执行了这个操作，并在所有订阅都准备好后隐藏它。我只想知道在哪里应用相同的逻辑（显示和隐藏加载图标），以便每次重新绘制模板时都会发生。伪代码也可以：

简而言之，当Meteor忙碌时，我想要反映出来。

非常感谢任何帮助！

编辑10/09/13：

从文档中得知...

这些Meteor函数将您的代码作为反应计算运行： 模板 Meteor.render和Meteor.renderList Deps.autorun

我认为可能的解决方案之一是在任何这些“计算”失效时显示加载指示器。

例如，如果您的代码正在Deps.autorun内运行，则计算实例作为第一个参数传递，并且您可以将回调传递给其onInvalidate方法，如下所示：

Deps.autorun(function(computation) {

  // do reactive stuff

  computation.onInvalidate(function() {
    // display loading indicator
  });
});

据我所知，您无法在其他Meteor方法中访问计算对象，只能在Deps.autorun中访问。

至于隐藏加载指示器，我认为最好的方法是在由于计算失效而（重新）渲染的最后一个模板的rendered回调函数内完成。

有人对此有什么见解，建议，技巧，黑科技等吗？

- Johnny

---

你能否提供一个更具代表性的例子来说明你正在做什么？也许在 Github 上提供一个小的可重现示例来阐明这个问题？ - alanning

@alanning 任何Meteor的示例都可以。基本上，我想在任何计算被无效化时显示一个加载消息，并在最后一个模板完成（重新）渲染时隐藏它。 - John

模板加载指示器...似乎需要修补Spark以调用无效挂钩。但是，Spark正在重写，所以长期来看不会有用。可能有一些方法可以改善应用程序的速度，使其不需要它。通常，渲染应该是相当即时的。如果不是这样，可能有机会对设计进行一些重构。 - alanning

@alanning Spark patch... 我也是这么想的，但那会包括所有东西，包括计算吗？还是只有模板渲染？可能是对的，要让它更快。这是我的第一个Meteor应用程序。我正在逐渐改善它的性能。不幸的是，我的应用程序在另一个应用程序的浏览器外壳中运行，我无法访问源代码，并且它使用IE7渲染引擎。但即使在Chrome中运行时仍然相当缓慢，所以我会继续努力。 - John

Answer 1

如果您还没有解决这个问题，我想分享另一个用户的解决方案，他在我的问题的答案中发布了。由nate-strauser在这里回答：

钩入到集合的 .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 选项结合使用时，您可以制作一个很好的（Loading....）消息，同时立即过渡到完全填充的模板。

- Mike Turley

---

这个问题仍未解决。ready 方法只有在集合最初加载时才有帮助，对于未来的模板重绘和计算失效没有帮助。正如我原来的问题所述，我已经在使用 ready。谢谢！ - John

Answer 2

你可以尝试使用在Meteor文档中提到的Template.myTemplate.created = function() { ... }。你可以在模板创建时运行一些jQuery代码，并将加载类添加到body中，然后在Template.myTemplate.rendered中移除加载类？

- Patrick Coffey

---

根据（我对）文档的理解，这只能在第一次呈现时起作用，而不是在重新呈现现有模板实例时。 “_当myTemplate的调用表示模板的新出现而不是现有模板实例的重新呈现时，将调用此回调函数._” - John