Share
Du har sett det ett tag nu med Googles läsare, Gmail och senast på Facebook. Förmodligen vill du också skriva RESTful evented JavaScript-applikationer. Tja, samarbetspartners, träffa Sammy.js, en liten JavaScript-ram byggd ovanpå jQuery. Sammy använder URL-hash (#) så att du kan skapa enkelsidiga AJAX-program som svarar på webbläsarens tillbaka-knapp. Intresserad?
I den här artikeln ger jag en kort översikt över ramen, och sedan en kort demonstration av hur det är att arbeta med Sammy.js, med hopp om att locka dig tillräckligt för att överväga det för dina projekt.
"Sammy.js är lätt både i storlek (<20kb) and footprint. Pull it into your already started applications."
Sammy.js sätts samman av Aaron Quint, en webbutvecklare från Brooklyn, NY. API: n är modellerad på den populära rubinramen Sinatra, och är perfekt för både enkla och komplexa applikationer. Det är lätt att komma in i, och kan dras in i dina befintliga projekt. Det är inte ett helt eller inget förslag; så låt oss ta en titt.
Sammy.js låter dig skriva enkelsidiga appar, ungefär som Gmail. Du kan behålla statusen för din app med webbadressen, utan att behöva uppdatera eller ändra sidan. Det finns andra MVC JavaScript-ramar, som SproutCore, som tenderar att vara alltomfattande. Men med Sammy har du ett ljust ramverk (~ 20kb) som kan aktivera flera instanser samtidigt (dvs. kör flera appar i samma dokument).
Installera Sammy.js är ganska enkelt. Gå vidare till nedladdningsidan, ta en kopia och flytta, sammy-0.5.4.min.js till var du lagrar ditt projekts bibliotek (typiskt / js för mig). I den här artikeln ska jag använda version 0.5.4, men du kan vara benägen att försöka sammy-latest.min.js. Du behöver också en kopia av jQuery, åtminstone v. 1.4.1. Som med de flesta jQuery-plugins är order viktigt: jQuery, före Sammy.js, före JavaScript. Jag brukar lägga min JavaScript längst ner på sidan eftersom det blockerar andra objekt från att lastas parallellt, vilket ger intrycket av en långsammare inläsningssida. Hittills har vi:
Sammy.js Exempel
Nu börjar vi koda vår app. För att hålla det enkelt jobbar jag inline, vilket inte är den bästa praxisen. Att lägga till en Sammy.js-applikation är lika enkelt som att tilldela den till en variabel som jag ringer till RatPack. På vår sida har vi definierat en div med id "innehåll" som vår ansökan kommer att fungera på. Vi anger detta enligt följande:
var ratPack = $ .sammy (funktion () this.element_selector = '#content'; // rutter går här);
Betydelsen av elementväljaren är att vi kan ha flera instanser av Sammy.js som körs i vårt dokument och påverkar olika element.
Sammy.js använder sökvägen enligt definitionen i URL-hash och de vanliga HTTP-metoderna (få, posta, sätta, ta bort) för att bestämma en återuppringningsfunktion för att åberopa. Dessa är typiskt kända som "rutter". Några exempel från webben skulle vara:
Som ett exempel kommer vi att skissa upp ett brevlådeprogram. Låt oss först konfigurera standardrutten för vår app, som kommer att landa på # / inkorg.
Accentsconagua
this.get ('# / inbox', funktion (sammanhang) context.app.swap ("); context. $ element (). append ('inkorg
'); ); Här kan du göra återuppringningsfunktionen göra vad du vill. Eftersom jag visar en inkorg, skulle jag förmodligen vilja göra ett ajax-samtal och hämta en lista med meddelanden. Men för enkelhets skull kommer jag bara att returnera en h1 märka. De context.app.swap ( ") berättar för Sammy att ersätta det som finns i mitt innehåll div, i stället för att bara lägga till det.
För att få det här att fungera i webbläsaren vill vi köra appen med jQuerys dokumentklara funktion och skicka den till vår startadress, enligt definitionen ovan.
$ (funktion () ratPack.run ('# / inbox');); Och det är allt. Vi borde nu kunna ladda vårt dokument i en webbläsare, appen ska starta och navigera oss till inkorgen.
Därefter kan vi skapa en annan rutt för att hantera märkta meddelanden:
this.get ('# / label /: name', funktion (context) context.app.swap ("); context. $ element (). append (''+ this.params [' name '] +'
'); ); Sammy använder kolonner-syntaxen (: var) för att returnera parametrar för att vi ska filtrera våra meddelanden. Återigen visar jag bara etikettens namn.
Till denna punkt har vi bara använt "get" HTTP-metoden. Säg att vi skulle skapa en blankett och rutt den till # / komponera:
this.get ('# / compose', funktion (sammanhang) context.app.swap ("); context. $ element (). append ('Säg hej till?
"+"'); ); Nu kan vi konfigurera en rutt för att acceptera den upplagda data och få Sammy att analysera den för oss.
this.ppar ('# / compose', funktion (context) context.app.swap ("); var till = this.params ['till']; sammanhang. $ element (). append ('hej "+ till +"
'); ); Det är grunderna. Ett enkelt API, tillräckligt kraftfullt för projekt både stora och små. Om du följer med koden kan vi lägga till lite navigation för att enkelt klicka.
- inkorg
- komponera
- drag
Naturligtvis har Sammy.js mycket mer att erbjuda än att bara definiera rutter i appen. Fler avancerade användare kan utforska anpassade händelser och namnområden, för händelsesdrivna applikationer. Aaron försöker hålla kärnan i Sammy.js så tätt som möjligt, men det kommer också med många plugins. Det finns en titel plugin, som låter dig enkelt ställa in dokumentets titel för olika rutter. Det finns flera templerande system, inklusive haml och mustasch. Det finns en snygg formverktyg och Sammy.Store, "en abstrakt adapterklass som omsluter en mängd olika datalager i webbläsaren till en enda gemensam uppsättning metoder för att lagra och reträtta data."
Jag hoppas att du har haft denna snabba titt på Sammy.js och är redo att överväga att använda den i dina applikationer. Låt oss höra dina tankar om Sammy.js i kommentarerna!
Den ursprungliga instruktören av denna handledning begärde att deras namn skulle tas bort från bylinjen.
