Turbolinks & Ladda

Question

Я пытаюсь использовать Turbolinks 3.0 и Ladda вместе в приложении Rails. Документация Ladda гласит:

«Если вы будете использовать загрузочную анимацию формы, которая отправляется на сервер (всегда в результате перезагрузки страницы) вы можете использовать метод связывания()»

Это то, что я делал до того, как я применил Turbolinks. Turbolinks работает автоматически для большинства простых запросов на получение, но для представления формы я переставляю свои формы на удаленный и просто отбрасываю основной div моей страницы, как показано на readme. Это отлично работает в целом.

Однако, если пользователь нажал кнопку «Назад» после этого, кнопка ladda все еще остается в отключенном состоянии, сером и состоянии изображения загрузчика. Я не хочу полагаться на таймер.

Поскольку я не перезагружаю страницу, как указано в приведенной выше цитате, я пытался активировать Ladda без метода привязки. Но единственный способ, которым я могу это сделать, - активировать Ladda на onclick.

Но по какой-либо причине, если я привязываю onclick к кнопке submit, он прерывает turbolinks, и форма вообще не отправляется.

$(document).on('click', '.ladda-button', function() { 
    $(this).ladda('start'); 
}); 

Это активирует ladda, но тогда форма не будет отправлена. Я использую jquery-turbolinks, так что код должен работать?

Другим направлением было бы использовать Ladda через метод привязки, а затем сбросить любые изображения ladda до того, как страница будет загружена через Turbolinks. Я совершил это следующим образом:

$(document).on("page:before-unload", function() { 
    $(".ladda-button").ladda(); 
    $(".ladda-button").ladda("stop"); 
}); 

Если я ставлю точку останова в отладчике, я могу видеть, что это успешно сбрасывает кнопки в исходное состояние перед загрузке следующей страницы через Turbolinks. Но когда я ударяю назад, загрузчик возвращается в состояние дезактивированного/серого/загружаемого состояния.

Я не хочу переписывать все свое приложение как клиентский javascript MVC и бэкэнд API, но я действительно хочу, чтобы у него было мгновенное, не-обновление страницы - и используйте эти удивительные ladda загружает изображения. Turbolinks 3.0 до сих пор потрясающе, но я действительно в тупике.

Любая помощь была бы принята с благодарностью!

EDIT: Я просто понимаю, что все мои JS сломаны, если пользователь ударил обратно.

Answer 1

Здесь была большая проблема - никакие сценарии не запускались при нажатии или в обратном направлении. Погрузчик был только первым, что я заметил.

Обходной/исправление было реализовано здесь: https://github.com/rails/turbolinks/pull/509

Вы должны использовать «данные-turbolinks-Eval = True» на вашем тег сценария, чтобы иметь огонь JS даже если его страницу назад/вперед.

Затем просто повторно инициализируйте изображение ladda/load.

<script data-turbolinks-eval=always> 
    $(".ladda-button").ladda(); 
    $(".ladda-button").ladda('stop'); 
    $(".ladda-button").ladda('bind'); 
</script>