Javascript Girl
  1. Javascript Girl
  3. Réinitialisation des scripts de page après le changement de page de SmoothState.Js
Intereting Posts
Comment puis-je accéder au DOM d'un <webview> dans Electron? Que dois-je faire pour obtenir javascript intellisense pour ma propre bibliothèque js dans Visual Studio Différence entre document.referrer et window.parent.location.href Mongoose.js: Trouver l'utilisateur par nom d'utilisateur COMME la valeur Comment configurerInterval pour appeler une fonction dans une classe? For-in vs Object.key pour tout, sans propriétés héritées Mise en œuvre Pub / Sub dans nodeJS Pourquoi dois-je utiliser un point-virgule après chaque fonction dans javascript? Masquer complètement le cadre dans les jeux de cadres en utilisant Javascript ou Jquery Forcer le lien vers le fichier mp3 pour télécharger / enregistrer-comme Recadrage des images dans le navigateur AVANT le téléchargement Utilisation d'un shader de sommet et de fragment différent pour chaque objet dans webgl Faire des demandes CORS Ajax en utilisant XMLHttpRequest Comment fonctionne le cadre JavaScript de Meteor? Crossbrowser onforeforeload?

Réinitialisation des scripts de page après le changement de page de SmoothState.Js

J'utilise SmoothState.js pour les transitions de page et ça fonctionne bien et charge les nouvelles pages avec ajax. Cependant, j'ai des scripts JS sur chaque page qui doivent être réinitialisés et je n'ai pas pu les faire figurer toujours sur les transitions de page.

Basé sur les FAQ:

SmoothState.js fournit la fonction onAfter callback qui vous permet de relancer vos plugins. Cela peut être délicat si vous n'êtes pas familier avec la façon dont AJAX fonctionne.

Lorsque vous exécutez un plugin sur $ (document) .ready (), il ne sera inscrit que sur les éléments qui se trouvent actuellement sur la page. Puisque nous injectons de nouveaux éléments à chaque chargement, nous devons exécuter les plugins à nouveau, en précisant les nouveaux éléments.

Une bonne façon de le faire est d'envelopper vos initialisations de plugins dans une fonction que nous appelons à la fois $ .fn.ready () et onAfter. Vous voudrez spécifier le contexte chaque fois que vous initialisez les plugins de sorte que vous ne les doublez pas. C'est ce qu'on appelle un «contrôleur d'exécution de module».

Ce que mon plan a été, c'est de prendre les fonctions de mes fichiers JS et de les mettre tous dans un appel AfterAfter dans le fichier SmoothState.js. De cette façon, chaque fois qu'un utilisateur change de page, les fonctions seraient toujours disponibles.

Voici la structure de code que j'ai maintenant. J'ai beaucoup creusé mais je suis bloqué. Pouvez-vous m'aider à comprendre ce que je fais mal? Merci pour votre temps! 

$(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"); });

J'ai réussi à obtenir une fonction distincte à exécuter à la fin du code en déplaçant votre script onAfter dans la fonction principale de lissage (supprimez les autres fonctions de lissage). Exécutez votre fonction sur le document prêt, en cas de rafraîchissement du navigateur. Si cela fonctionne de la même manière que votre code, ce serait comme suit: 

 $(document).ready(function() { mail(); }); function mail() { // script from mail.js goes here } $(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); } }, onAfter: function() { mail(); } }, smoothState = $("#main").smoothState(options).data("smoothState"); });

Je travaille sur un site Web en ce moment qui ressemble à ce que vous faites, je pense.

La façon dont je l'ai fait, j'ai deux fonctions principales. Le premier contient toutes les fonctions qui doivent être exécutées une seule fois, c'est-à-dire les choses pour gérer les modifications Ajax et POPSTATE, etc. Cette fonction exécute la 2ème fonction principale à la fin. La 2ème fonction principale est une fonction qui contient des fonctions qui doivent être exécutées à nouveau lors des modifications de page; elles recherchent une classe spécifique ou une étiquette d'identification dans la zone de contenu du site avant d'exécuter les fonctions et de joindre les auditeurs d'événements aux éléments sur le nouvel élément chargé page. 

 function mainOne() { // Set up Ajax, set up any navigation menus that stay constant through pages etc // Also runs the 2nd function so that the functions specific to the page // the code loads up on also get run mainTwo(); } function mainTwo() { // Contains functions that are specific to pages that can be loaded via AJAX /* ie: if( $("element-that-only-exists-once-on-one-specific-page").length == 1 ) { // Do stuff specific to only this page } */ }

Dans ma fonction AJAX, j'appelle le mainTwo () avec chaque chargement de page réussie.

Une nouvelle façon de s'assurer qu'une fonction s'exécute une seule fois par élément est d'ajouter une classe à l'élément auquel vous attachez un événement, par exemple: 

 $("div.objects").not(".processed").addClass("processed").click(function(){ // Stuff to do in the function });

De ce que vous avez cité là-bas, cela me semble que ma fonction mainTwo () est à peu près ce qu'ils veulent que vous configurez. Fondamentalement, une fonction principale pour contenir toutes vos autres fonctions. Si vous publiez plus de code, je peux vous aider à le résoudre.