Jeg skrev tidligere en artikel om hvordan jeg har lavet et simpelt klientside state objekt - $state. Her er en lille instruktion i hvordan man kan bruge det.
Jeg tager udgangspunkt i en simpel form med to inputfelter:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$state</title>
</head>
<body>
<form action="state.asp">
<select id="gruppe">
<option>Sko</option>
<option>Støvler</option>
<option>Stilet</option>
</select>
<input id="price" />
<input type="submit" />
</form>
</body>
</html>
Jeg ønsker at kunne reetablerer denne side med mine indtastninger, uanset om jeg kommer til siden som resultat af at jeg trykker på tilbageknappen, eller har gemt et link.
Det er her mit lille dispatcher-objekt kommer ind i billedet. Jeg inkluderer følgende i head sektionen:
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="csState.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$state.hookup("#gruppe");
$state.hookup("#price");
});
</script>
Nu vil alle ændringer i de to kontroller, som jeg har hooket op, persisterer deres state i url’en, og på den måde understøtte initialicering.
Bag ved scenen er det jQuery der sørger for at hooke op på onchange eventen på form-elementerne, og holder url’en opdateret.
Eksemplet er meget simpelt, men jeg bruger faktisk objektet i endog meget komplicerede applikationer, for at understøtte netop den funktionalitet.
Hvis man skal bruge objektet på mere specielle kontroller, skal man blot sørge for at disse kontroller overholder 2 ting:
- De bliver initialiceret i onload, hvor man kan tilgå staten via $state.get(“myId”).
- De opdaterer $state hver gang de har ændringer via: $state.set(“myId”, value);
// Pseudokode
// Init
$(document).ready(function(){
myControle.initialize($state.get("myControle"));
});
// Change handlere
myControleChange = function(){
$state.set("myControle", this.value);
}
Jeg håber det var med til at sprede lidt lys, ellers er du er velkommen til at stille spørgsmål her.
Code on…