Ruby on Rails
Turbolinks

CSS HTML JavaScript jQuery MongoDB MySQL postgresql Ruby Language SQL twitter-bootstrap
Поиск…


Вступление

Turbolinks - это javascript-библиотека, которая ускоряет навигацию вашего веб-приложения. Когда вы переходите по ссылке, Turbolinks автоматически извлекает страницу, свопирует ее в <body> и объединяет ее <head>, причем все без затрат на полную загрузку страницы.

замечания

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

Ключевые вынос:

  • Привязать к turbolinks:load событие turbolinks:load вместо события document.ready
  • Используйте атрибут data-turbolinks-false чтобы отключить функциональные возможности turbolink по каждой ссылке.
  • Используйте атрибут data-turbolinks-permanent для сохранения элементов в нагрузках на странице и для предотвращения ошибок, связанных с кешем.

Для более глубокого изучения турбонасосов посетите официальный репозиторий github .

Кредит для большей части этой документации относится к людям, которые разработали документацию по турбовинтовым устройствам в репозитории github.

С turbolinks традиционный подход к использованию: 

$(document).ready(function() {
  // awesome code
});

не будет работать. При использовании turbolinks событие $(document).ready() будет срабатывать только один раз: при начальной загрузке страницы. С этого момента каждый раз, когда пользователь нажимает ссылку на вашем веб-сайте, turbolinks перехватывает событие щелчка ссылки и делает запрос ajax заменять тег <body> и объединять теги <head>. Весь процесс запускает понятие «посещения» в судах турбонаводов. Поэтому вместо использования традиционного синтаксиса document.ready() выше вам придется привязываться к событию посещения turbolink следующим образом: 

// pure js
document.addEventListener("turbolinks:load", function() {
  // awesome code
});

// jQuery
$(document).on('turbolinks:load', function() {
  // your code
});

Отключить турбонауки по определенным ссылкам

Очень просто отключить турбовинты по конкретным ссылкам. Согласно официальной документации по турбонагнетателям :

Turbolinks можно отключить по каждой ссылке путем аннотации ссылки или любого из ее предков с данными turbolinks = "false".

Примеры: 

// disables turbolinks for this one link
<a href="/" data-turbolinks="false">Disabled</a>

// disables turbolinks for all links nested within the div tag
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/">I'm also disabled</a>
</div>

// re-enable specific link when ancestor has disabled turbolinks
<div data-turbolinks="false">
  <a href="/">I'm disabled</a>
  <a href="/" data-turbolinks="true">I'm re-enabled</a>
</div>

Понимание посещений приложений

Визиты приложений инициируются нажатием на ссылку с поддержкой Turbolinks или программным путем путем вызова 

Turbolinks.visit(location)

По умолчанию функция посещения использует действие «вперед». Понятно, что поведение по умолчанию для функции посещения - это переход на страницу, указанную параметром «location». Всякий раз, когда страница посещается, turbolinks вставляет новую запись в историю браузера, используя history.pushState . История важна, потому что turbolinks будет пытаться использовать историю для загрузки страниц из кеша, когда это возможно. Это позволяет очень быстро выполнять рендеринг страниц для часто посещаемых страниц.

Однако, если вы хотите посетить место, не вставляя историю в стек, вы можете использовать действие «replace» для функции посещения так: 

// using links
<a href="/edit" data-turbolinks-action="replace">Edit</a>

// programatically
Turbolinks.visit("/edit", { action: "replace" })

Это заменит верхнюю часть стека истории новой страницей так, чтобы общее количество элементов в стеке оставалось неизменным.

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

Отмена посещений до их начала

Turbolinks предоставляет прослушиватель событий, который может использоваться для остановки посещений. Слушайте turbolinks:before-visit событие turbolinks:before-visit чтобы получить уведомление о начале своего визита.

В обработчике событий вы можете использовать: 

// pure javascript
event.data.url

или же 

// jQuery
$event.originalEvent.data.url

для получения места посещения. Затем визит можно отменить, позвонив: 

event.preventDefault()

НОТА:

Согласно официальным документам turbolinks :

Реставрационные посещения не могут быть отменены и не запускать турбонауки: перед посещением.

Сохранение элементов на разных страницах

Рассмотрим следующую ситуацию: представьте, что вы являетесь разработчиком веб-сайта социальных сетей, который позволяет пользователям дружить с другими пользователями и использует турболинки для ускорения загрузки страницы. В правом верхнем углу каждой страницы сайта есть номер, указывающий общее количество друзей, которые пользователь имеет в настоящее время. Представьте, что вы используете свой сайт и у вас есть 3 друга. Когда новый друг добавляется, у вас есть javascript, который запускает, который обновляет счетчик друзей. Представьте, что вы только что добавили нового друга и что ваш javascript правильно работал и обновил счет друга в правом верхнем углу страницы, чтобы теперь сделать 4. Теперь представьте, что вы нажимаете кнопку возврата браузера. Когда страница загружается, вы замечаете, что счетчик друзей говорит 3, даже если у вас четверо друзей.

Это довольно распространенная проблема, и это решение для turbolinks. Причина, по которой возникает проблема, заключается в том, что turbolinks автоматически загружает страницы из кеша, когда пользователь нажимает кнопку «Назад». Кэшированная страница не всегда будет обновляться с помощью базы данных.

Чтобы решить эту проблему, представьте, что вы передаете счет другу внутри тега <div> с идентификатором «friend-count»: 

<div id="friend-count" data-turbolinks-permanent>3 friends</div>

Добавляя атрибут data-turbolinks-permanent , вы говорите, что turbolinks сохраняет определенные элементы в нагрузках на страницу. Официальные документы говорят :

Назначьте постоянные элементы, указав им идентификатор HTML и аннотируя их данными-turbolink-постоянными. Перед каждым рендером Turbolinks сопоставляет все постоянные элементы по id и передает их с исходной страницы на новую страницу, сохраняя свои данные и прослушиватели событий.



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow