2012-05-21 6 views
4

Scénario:Comment réutiliser JSON objet

La page Web MVC obtient objet JSON avec beaucoup de données. En cliquant sur le bouton (il y a un certain nombre de boutons), je voudrais réutiliser cet objet JSON et sélectionner les propriétés JSON requises (sans faire de requête au serveur).

C'est pas HTML5 donc impossible d'utiliser le stockage local du navigateur. Pour le moment, je stocke l'objet JSON sur la variable GLOBAL et je le réutilise.

Y at-il des options élégantes disponibles pour stocker et réutiliser l'objet JSON retourné du côté client?

+3

Qu'entendez-vous par réutilisation? Entre les rafraîchissements de la page aussi? –

+0

Une variable globale est un moyen parfaitement acceptable de le faire en supposant que vous n'avez pas besoin de réutiliser les données après l'actualisation de la page. Bien que l'utilisation d'une sorte de schéma d'espacement des noms (pour tout votre code) soit meilleure: vous feriez la variable "global" dans l'espace-nom ... – nnnnnn

+0

@JakubKonecki, réutilisez sur une seule page. Pas après l'actualisation que l'actualisation déclenchera la requête du serveur :-) –

Répondre

1

Vous pouvez stocker l'objet dans Data- attribut d'un élément - contenant de préférence pour la partie de la page qui représente vos données (tableau, grille):

var json = {}; 

$('#mygrid').data('mydata', json); 

Vous pouvez le récupérer plus tard

var json = $('#mygrid').data('mydata') 

documentation de la méthode des données jQuery(): http://api.jquery.com/data/

+1

'" Ce n'est pas HTML5 "' ... –

+1

@Derek. Alors comme la réponse. lire les docs ... – gdoron

+1

@JakubKonecki, is not Données un attribut HTML 5 –

1

une autre option pour Jakubs réponse est de créer une variable globale que vous pouvez mettre à jour et récupérer comme vous le souhaitez sur la page.

Global variables get attached to the window object, il suffit d'écrire cela dans votre section <head>.

<script type="text/javascript"> 
    window.jsonData = {}; 
</script> 

Ensuite, où que vous récupériez vos données, mettez à jour cet objet.

<script type="text/javascript"> 
    $.ajax(..., function(data) { 
     window.jsonData = data; 
    }); 
</script> 

Ensuite, vous pouvez l'utiliser où vous voulez dans votre code sur cette page.

<script type="text/javascript"> 
    console.dir(jsonData); 
</script> 
+0

quelle est la différence entre cette approche et la variable globale. –

+0

@nilpun: Cette approche consiste à "utiliser une variable globale"? – Bergi

3

Cachez juste les données. Il n'y a pas besoin de stocker le JSON dans une variable globale, je suis sûr que vous trouverez une place dans votre application MVC pour définir une variable locale. Vous aurez implémenté une fonction getter pour les données avec un callback. Avec la mise en cache, ça va ressembler à ceci:

var getData = (function(){ 
    var cache; 
    var loading = false; 
    var callbacks = []; 
    return function(callback) { 
     if (typeof cache != "undefined") 
      callback(cache); 
     else { 
      callbacks.push(callback); 
      if (!loading) { 
       loading = true; 
       doSingleHeavyAjaxCall(options, function success(data) { 
        cache = data; 
        for (var cb; cb = callbacks.shift();) 
         cb(cache); 
       }); 
      } 
     } 
    }; 
})(); 

Ensuite, utilisez getData(function callback(data){...}) aussi souvent que vous voulez, et il ne déclenche une demande de paiement ajax.

+0

quel est l'avantage de cette approche par opposition à la variable globale avec l'espacement de nom propre –

+0

Il a seulement une méthode d'interface (quelque part exposée), dans mon exemple 'getData'. Tout ce que vous devez faire d'autre devrait être fait chaque fois que vous avez besoin des données. Quel est l'avantage de rendre le cache public? – Bergi