Javascript Перестаньте работать с жесткой перезагрузкой страницы в MeteorJS

Я разработал приложение с использованием MeteorJS. Все работает нормально. Небольшая проблема, с которой я столкнулся, то есть когда я перезагружаю страницу, пользовательский javascript перестает работать.

Я реализовал в приложении библиотеку javascript сортировки таблиц (http://tablesorter.com/docs/). После перезагрузки сортировка страниц перестает работать, но когда я перехожу на другую страницу и возвращаюсь на ту же страницу, она работает нормально.

Вот код, который я использовал для сортировки таблиц.

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

Я также пробовал добавить этот код в метод onRendered MeteorJS.

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

Когда я выполняю $ ("table"). Tablesorter (); в консоли после полной перезагрузки страницы, она начинает работать.


javascript jquery meteor meteor-blaze flow-router
person Manoj Kumar    schedule 29.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы звоните .tablesorter() до того, как будут получены все данные.

Когда вы загружаете страницу Meteor в первый раз (как и при жесткой перезагрузке), все подписки сбрасываются на пустые. Значит, данных о клиенте нет.

Затем ваше приложение javascript загружается и начинает выполняться: вы вызываете подписку для получения данных, и ваш шаблон визуализируется вскоре после этого, но до данные подписки фактически поступили с сервера.

Ваш шаблон повторно отображается по мере поступления данных, но onRendered() уже сработал один раз и больше не срабатывает.

Что вам нужно сделать, так это дождаться звонка .tablesorter(), пока ваша подписка не станет .ready(). Поскольку onRendered() не является реактивным, для этого необходимо определить автозапуск. Если вы следуете рекомендуемому шаблону подписок, это будет выглядеть так:

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();
    });
});
person Jesper We    schedule 29.07.2016
comment
Как насчет простого использования onReady обратного вызова subscribe()? - person ghybs; 29.07.2016
comment
Что ж, если подписка является подпиской на уровне шаблона, это лучше из-за отсутствия автозапуска, но OP не показывает, как он подписывается, и я лично предпочитаю делать что-то внутри шаблона, чтобы иметь этот контекст. - person Jesper We; 29.07.2016
comment
@JesperWe, я не понял captableSubscription.ready (), не могли бы вы объяснить это. - person Manoj Kumar; 29.07.2016
comment
Хорошо, я немного изменил ответ, чтобы показать, как это сделать в соответствии с принципами MeteorGuide (ссылка в ответе) - person Jesper We; 29.07.2016
comment
@JesperWe Я внедрил ваш код в свой код. Он показывает TypeError: this.subscriptionsReady не является функцией в оконной консоли. - person Manoj Kumar; 03.08.2016
comment
Я изменил ответ на тот, который работает лучше (не зависит от контекста) - person Jesper We; 03.08.2016