Javascript 停止在 MeteorJS 中进行硬页面重新加载

Question

我使用 MeteorJS 开发了一个应用程序。一切正常。我面临的一个小问题，即当我硬重新加载页面时，自定义 JavaScript 停止工作。

我已经在应用程序中实现了表排序 javascript 库 ( http://tablesorter.com/docs/ )。重新加载后，页面排序停止工作，但当我导航到另一个页面并返回到同一页面时，它工作正常。

这是我用来对表格进行排序的代码。

$(document).ready(function () {
    $("table").tablesorter();
});

我还尝试在 MeteorJS 的 onRendered 方法中添加此代码

Template.captable.onRendered(function () {
    $("table").tablesorter();
});

当我在硬重新加载页面后在控制台中执行 $("table").tablesorter(); 时，它开始工作。

Answer 1

听起来您在所有数据到达之前调用 .tablesorter() 。

当您第一次加载 Meteor 页面(与硬重新加载一样)时，所有订阅都将重置为空。所以客户端没有可用的数据。

然后您的应用程序 JavaScript 加载并开始执行:您调用 subscribe 来获取数据，您的模板很快就会呈现，但之前订阅数据实际上已从服务器到达。

当数据到达时，您的模板将重新渲染，但 onRendered() 已经触发一次，并且不会再次触发。

您需要做的是等待调用.tablesorter()，直到您的订阅.ready()。由于 onRendered() 不是响应式的，因此您需要定义一个自动运行来执行此操作。如果您关注the recommended pattern for template subscriptions ，看起来像这样:

Template.captable.onCreated( function() {
    this.subscribe('captable'); // ...or whatever your publication name is.
});

Template.captable.onRendered(function () {
    this.autorun( function() {
        if( Template.instance().subscriptionsReady() ) $("table").tablesorter();
    });
});