Реинициализация скриптов страницы после изменения страницы SmoothState.Js
Я использую SmoothState.js для переходов страниц, и он отлично работает и загружает новые страницы с помощью ajax. Тем не менее, у меня есть JS-скрипты на каждой странице, которые нужно переинициализировать, и я не смог заставить их всегда присутствовать при переходах страниц.
На основании FAQ:
smoothState.js предоставляет функцию обратного вызова onAfter, которая позволяет вам повторно запускать ваши плагины. Это может быть сложно, если вы не знакомы с тем, как работает AJAX.
Когда вы запускаете плагин для $ (document) .ready (), он будет регистрироваться только для элементов, которые в данный момент находятся на странице. Поскольку мы внедряем новые элементы при каждой загрузке, нам нужно снова запускать плагины, ограничивая их новыми элементами.
Хороший способ сделать это - обернуть инициализации вашего плагина в функцию, которую мы вызываем как для $ .fn.ready (), так и для onAfter. Вы захотите указывать контекст каждый раз, когда инициализируете плагины, чтобы не связывать их дважды. Это называется «контроллером выполнения модуля».
Мой план состоял в том, чтобы взять функции из моих файлов JS и поместить их все в вызов onAfter внутри файла SmoothState.js. Таким образом, каждый раз, когда пользователь меняет страницу, функции всегда будут доступны.
Вот структура кода у меня сейчас. Я много копал, но застрял. Можете ли вы помочь мне понять, что я делаю неправильно? Спасибо за ваше время!
$(document).ready(function() {
mail();
});
$('#main').smoothState({
onAfter: function() {
mail();
}
});
function mail() {
// script from mail.js goes here
}
$(function() {
$('#main').smoothState();
});
$(function() {
"use strict";
var options = {
prefetch: true,
pageCacheSize: 3,
onStart: {
duration: 250, // Duration of our animation
render: function($container) {
// Add your CSS animation reversing class
$container.addClass("is-exiting");
// Restart your animation
smoothState.restartCSSAnimations();
}
},
onReady: {
duration: 0,
render: function($container, $newContent) {
// Remove your CSS animation reversing class
$container.removeClass("is-exiting");
// Inject the new content
$container.html($newContent);
}
},
},
smoothState = $("#main").smoothState(options).data("smoothState");
});