web-dev-qa-db-fra.com

Comment désactiver la mise en cache dans jQuery Mobile UI

A tenté...

<div data-role="page" data-cache="30"> 
<div data-role="page" data-cache="never">
<div data-role="page" data-cache="false"> 
<div data-role="page" cache="false">

Rien ne semble fonctionner ... donc en ce moment je résout le problème côté serveur via ...

.'?x='.Rand()
.'&x='.Rand()

Je ne veux pas désactiver le AJAX juste la mise en cache. Il doit y avoir un meilleur moyen cependant ... est-ce que je manque quelque chose?

Merci,

Serhiy

javascriptjqueryjquery-uijquery-mobile
27
Serhiy

Merci pour les réponses, les gars, et même s'ils ne fonctionnaient pas tout à fait pour moi, ils m'ont indiqué la direction pour trouver le code que je cherchais.

Voici le code que j'ai trouvé sur le Github Gist de ce gentleman.

https://Gist.github.com/92192

jQuery('div').live('pagehide', function(event, ui){
  var page = jQuery(event.target);

  if(page.attr('data-cache') == 'never'){
    page.remove();
  };
});

Il y a aussi un code de bouton de retour dans ce Gist, mais je ne semble pas vraiment en avoir besoin car mon bouton de retour semble très bien fonctionner ...

36
Serhiy

Avez-vous essayé d'écraser la valeur par défaut?

$(document).bind("mobileinit", function(){
    $.mobile.page.prototype.options.domCache = false;
});

Ça marche pour moi

6
jrenouard

La mise en cache des pages est désormais désactivée par défaut dans jQM RC1. Voir l'extrait ci-dessous du site Web jQM sur la mise en cache des pages: http://jquerymobile.com/demos/1.0rc1/docs/pages/page-cache.html

Si vous préférez, vous pouvez demander à jQuery Mobile de conserver les pages précédemment visitées dans le DOM au lieu de les supprimer. Cela vous permet de mettre en cache les pages afin qu'elles soient disponibles instantanément si l'utilisateur y revient.

Pour conserver toutes les pages précédemment visitées dans le DOM, définissez l'option domCache du plugin de page sur true, comme ceci:

$.mobile.page.prototype.options.domCache = true;

Alternativement, pour mettre en cache uniquement une page particulière, vous pouvez ajouter l'attribut data-dom-cache = "true" au conteneur de la page:

<div data-role="page" id="cacheMe" data-dom-cache="true">

Vous pouvez également mettre en cache une page par programme comme ceci:

pageContainerElement.page({ domCache: true });

L'inconvénient de la mise en cache DOM est que le DOM peut devenir très volumineux, ce qui entraîne des ralentissements et des problèmes de mémoire sur certains appareils. Si vous activez la mise en cache DOM, prenez soin de gérer le DOM vous-même et de tester soigneusement sur une gamme d'appareils.

5
Martin

Méthode 1

Cela désactive AJAX

Lire http://jquerymobile.com/demos/1.0a2/#docs/api/globalconfig.html

Réglez ajaxLinksEnabled sur false et il ne chargera pas et ne mettra pas en cache ces pages, fonctionne simplement comme des liens normaux.

Méthode 2

La deuxième idée est de supprimer les éléments mis en cache. Vous pouvez vous lier à l'événement pagehide et lui faire supprimer la page à la place. Si elle n'est pas présente dans DOM, la page sera à nouveau chargée.

Cela peut être fait avec ce code comme preuve de concept:

$('.ui-page').live('pagehide',function(){ $(this).remove(); });

Mais il faut un peu de travail. Le code ci-dessus rompt l'historique. Cela prouve que vous ne pourrez l'utiliser qu'avec les pages que vous avez l'intention de laisser dans votre arborescence de sitemaps. Par conséquent, vous devez créer un sélecteur spécial pour eux ou le lier à certaines pages seulement.

Vous pouvez également vous lier au clic ou à l'événement mousedown d'un bouton, obtenir son href, en générer l'identifiant de page et trouver le div par id pour le supprimer avant que jqm essaie de le rechercher.

Je n'ai trouvé aucun moyen conseillé de désactiver le cache ou de forcer le chargement.

4
naugtur

La réponse de Martin devrait être la bonne à mon avis mais jQuery Mobile cache la première page quoi qu'il arrive. https://github.com/jquery/jquery-mobile/issues/3249

J'ai choisi de "patcher" le comportement de $.mobile.page.prototype.options.domCache = false et data-dom-cache="true"

$(document).on('pagehide', function (e) {
    var page = $(e.target);
    if (!$.mobile.page.prototype.options.domCache
        && (!page.attr('data-dom-cache')
            || page.attr('data-dom-cache') == "false")
        ) {
        page.remove();
    }
});
2
KCD

Voici ma solution de travail:

$('.selector').live( 'pagebeforecreate', function () {
    $.mobile.urlHistory.stack = [];
    $.mobile.urlstack = [];
    $( '.ui-page' ).not( '.ui-page-active' ).remove();
});

J'ai écrit un article (original en allemand) sur ce sujet, peut-être que cela aide. Lien vers l'article traduit par Google

1
Sebastian Sauer