Share
Je ziet dit al een tijdje met Google's Reader, Gmail en meest recent op Facebook. Waarschijnlijk zou jij ook RESTful evented JavaScript-applicaties willen schrijven. Wel, mede-ontwikkelaars ontmoeten Sammy.js, een klein JavaScript-framework dat bovenop jQuery is gebouwd. Sammy gebruikt de URL-hash (#) om u toe te staan om AJAX-toepassingen met één pagina te maken die reageren op de terugknop van uw browser. Geïnteresseerd?
In dit artikel zal ik een kort overzicht geven van het kader en vervolgens een korte demonstratie van hoe het is om met Sammy.js samen te werken, in de hoop dat je genoeg verleidt om het voor je projecten te overwegen..
"Sammy.js is zowel qua grootte licht (<20kb) and footprint. Pull it into your already started applications."
Sammy.js wordt samengesteld door Aaron Quint, een webontwikkelaar uit Brooklyn, NY. De API is gemodelleerd naar het populaire ruby-framework, Sinatra, en is geweldig voor zowel eenvoudige als complexe applicaties. Het is gemakkelijk om erin te komen en kan worden getrokken in uw bestaande projecten. Het is niet een alles of niets propositie; dus laten we een kijkje nemen.
Met Sammy.js kun je apps met één pagina schrijven, net als Gmail. U kunt de status van uw app onderhouden met de URL, zonder de pagina te vernieuwen of te wijzigen. Er zijn andere MVC JavaScript-frameworks, zoals SproutCore, die over het algemeen allesomvattend zijn. Maar met Sammy, heb je een licht (~ 20 kb) raamwerk, in staat om meerdere instanties gelijktijdig aan te roepen (dat wil zeggen, meerdere apps in hetzelfde document draaien).
Sammy.js installeren is vrij eenvoudig. Ga naar de downloadpagina, pak een kopie en verplaats, sammy-0.5.4.min.js naar waar je de bibliotheken van je project opslaat (meestal / js voor mij). Voor de toepassing van dit artikel zal ik versie 0.5.4 gebruiken, maar u bent misschien geneigd om het te proberen sammy-latest.min.js. Je hebt ook een kopie van jQuery nodig, ten minste v. 1.4.1. Zoals bij de meeste jQuery-plug-ins is de volgorde belangrijk: jQuery, voor Sammy.js, vóór je JavaScript. Ik heb de neiging om mijn JavaScript onder aan de pagina te plaatsen, omdat het andere items blokkeert terwijl ze parallel worden geladen, waardoor de indruk wordt gewekt van een langzamere laadpagina. Tot nu toe hebben we:
Sammy.js Voorbeeld
Nu om onze app te coderen. Om het simpel te houden, werk ik inline, wat niet de beste manier is. Het toevoegen van een Sammy.js-applicatie is net zo eenvoudig als het toewijzen aan een variabele, die ik aanroep ratPack. Op onze pagina hebben we een div gedefinieerd met de id "inhoud" waarop onze applicatie zal handelen. We geven dit als volgt aan:
var ratPack = $ .sammy (function () this.element_selector = '#content'; // routes gaan hier naartoe);
Het belang van de elementselector is dat we meerdere exemplaren van Sammy.js in ons document kunnen uitvoeren, die verschillende elementen beïnvloeden.
Sammy.js gebruikt het pad, zoals gedefinieerd in de URL-hash, en de gebruikelijke HTTP-methoden (get, post, put, delete) om een callback-functie te bepalen die moet worden opgeroepen. Deze zijn meestal bekend als "routes". Enkele voorbeelden uit het web zijn:
We zullen bijvoorbeeld een postvaktoepassing schetsen. Laten we eerst de standaardroute van onze app instellen, die op # / inbox belandt.
Accentsconagua
this.get ('# / inbox', functie (context) context.app.swap ("); context. $ element (). append ('postvak IN
'); ); Hier kunt u de callback-functie laten doen wat u maar wilt. Omdat ik een Postvak IN laat zien, wil ik waarschijnlijk een ajax-oproep plaatsen en een lijst met berichten ophalen. Om het eenvoudig te houden, ga ik gewoon een a terugkeren h1 label. De context.app.swap ( ") vertelt Sammy om te vervangen wat in mijn content-div staat, in plaats van er alleen aan te hechten.
Om dit in de browser te laten werken, willen we de app gebruiken met de document-ready-functie van jQuery en doorgeven aan onze start-URL, zoals gedefinieerd in de bovenstaande route.
$ (function () ratPack.run ('# / inbox');); En dat is het. We zouden nu ons document in een browser moeten kunnen laden, de app zou moeten starten en ons naar onze inbox moeten navigeren.
Vervolgens kunnen we een andere route maken om gelabelde berichten af te handelen:
this.get ('# / label /: naam', functie (context) context.app.swap ("); context. $ element (). append (''+ this.params [' naam '] +'
'); ); Sammy gebruikt de dubbele punt var-syntaxis (: var) om parameters terug te sturen voor ons om onze berichten te filteren. Nogmaals, ik toon gewoon de naam van het label.
Tot nu toe hebben we alleen de HTTP-methode 'get' gebruikt. Stel dat we een formulier maken en dit naar # / compose leiden:
this.get ('# / compose', functie (context) context.app.swap ("); context. $ element (). append ('Zeg hallo tegen?
'+''); ); Nu kunnen we een route instellen om de geposte gegevens te accepteren en Sammy die voor ons te laten analyseren.
this.post ('# / compose', functie (context) context.app.swap ("); var to = this.params ['to']; context. $ element (). append ('hi '+ tot +'
'); ); Dat is de basis. Een eenvoudige API, krachtig genoeg voor projecten, zowel groot als klein. Als u de code volgt, kunnen we wat navigatie toevoegen om het klikken te vergemakkelijken.
- postvak IN
- componeren
- tocht
Natuurlijk heeft Sammy.js veel meer te bieden dan alleen het definiëren van routes in de app. Meer geavanceerde gebruikers kunnen aangepaste evenementen en naamruimten verkennen voor door gebeurtenissen gestuurde applicaties. Aaron probeert de kern van Sammy.js zo strak mogelijk te houden, maar het komt ook met veel plug-ins. Er is een titelinvoegtoepassing waarmee u de titel van het document gemakkelijk kunt instellen voor verschillende routes. Er zijn verschillende templating-systemen, waaronder haml en snor. Er is een fraaie vormbuilder en Sammy.Store, "een abstracte adapterklasse die de veelheid aan browsergegevensopslag omspant tot een gemeenschappelijke set methoden voor het opslaan en terughalen van gegevens."
Ik hoop dat je deze snelle blik hebt genoten op Sammy.js en klaar bent om te overwegen het te gebruiken in je applicaties. Laten we uw mening over Sammy.js in de reacties horen!
De oorspronkelijke instructeur van deze zelfstudie vroeg om hun naam uit de naamregel te verwijderen.
