Kom igång med Knockout.js

Överföringen av den svåraste delen av applikationen till klientsidan blir allt vanligare, och därmed flyttas serverspråk till endast de som hanterar uthållighet genom tjänster RESTEN.
En del av ansvaret för att allt detta ska hända ligger på de nya sätten att arbeta med JavaScript och genereringen av dynamiska och lyhörda användargränssnitt, tack vare de olika ramar existerande.
Detta ramverk har många styrkor som dess låga vikt och dokumentation, samt att det har funnits på marknaden länge, så det har mognat konsekvent för att kunna appliceras i produktionsmiljöer.
1- Som de flesta bibliotek och ramar för JavaScript kraven är inte så krävande, i det här fallet kommer vi att behöva en liten webbserver för att bättre behandla våra förfrågningar, det kan vara Wamp i Windows eller en instans av Apache i Linux eller Mac.
2- Vi behöver en rik textredigerare i stil med Sublim text eller NotePad ++ för att kunna skriva den kod som krävs för att uppfylla de exempel och övningar som vi kommer att visa.
3- Slutligen behöver vi internetåtkomst för att kunna ladda ner Knockout.js även en gång.
Installationsprocessen är ganska enkel och beror inte på en specifik plattform, processen kommer att vara densamma oavsett om vi är inne Windows, Linux eller MAC.
Det första vi måste göra är att ladda ner Knockout.js från dess officiella sida, för detta kan vi gå till projektets webbplats och i avsnittet av Nedladdningar vi högerklickar och väljer alternativet Spara länk som:

FÖRSTORA

Det är viktigt att vi sparar filen i en mapp som är relevant för vårt projekt för att inkludera den. Det kan också installeras med Lövsal eller till och med använda den från någon av CDN: er tjänster för att inte behöva använda vår server som ett biblioteksförråd.
När vi väl har filen måste vi helt enkelt inkludera den i en fil HTML som följer:

 Installera Knockout.js 

Som vi kan se behövde vi bara inkludera den nedladdade filen via en skripttagg. Om vi ​​vill arbeta med versionen av CDN Vi behöver bara ändra den lokala sökvägen till filens internetväg, det här liknar mycket att arbeta med bibliotek som t.ex. jQuery eller ramar som AngularJS.
Modell Visa Visa modellTiteln på det här avsnittet kan tyckas som ett misstag. Hur är det möjligt att tala om Model View View Model? Det är inte samma sak? Det visar sig att Knockout har ett designmönster eller utvecklingsparadigm där det har inspiration från MVC, där säkert Modell och den Se de beter sig som det vi vet från det "klassiska" tillvägagångssättet, men vi har ett nytt lager som heter ViewModel som ansvarar för att förena och ge funktionalitet till våra åsikter.
Databinding är huvudkaraktäristiken för vårt ramverk som gör att vi kan indikera för dokumentet HTML som är de element som du måste ge åtkomst till Knockout.js, även om det låter som något komplext, kan vi sammanfatta det som något enklare, det är den enkla tillämpningen av egenskaper på trädets element SOL där vi vill att den ska ha prestanda Knockout.js.
Låt oss se följande exempelkod, låt oss säga att vi vill skriva ut ett namn från vårt ViewModel på en etikett inuti kropp, för detta behöver vi bara göra följande:

 Installera Knockout.js 

Vi ser det inom vår etikett h1 det finns en span -tagg och span -taggen har en egenskap som inte är infödd till HTML vad är egendomen databindning, det är det som får oss att ansluta Knockout.js med vår DOM -träd i det här fallet har vi helt enkelt indikerat att egenskapen eller variabelnamnet ska tas från vårt ViewModel.
Om vi ​​kör vårt exempel i webbläsaren får vi ett resultat som det vi kan se i följande bild:

Med detta har vi redan gjort vår första applikation med Knockout.js.
Nu måste vi ha insett den filosofin ViewModel är en viktig del av arbetet i Knockout.js, det är därför vi kommer att fortsätta fördjupa oss lite mer i ämnet.
Skapande av VistaModelDet finns två sätt att skapa en modellvy, grundformen och den objektorienterade, vilken vi använder redan beror på vårt sätt att utveckla, även om den rekommenderade är objektorienterad eftersom även om det är mer komplext i början tillåter det oss att uppnå en bättre ordning i vår applikation.
För att skapa en ViewModel grundläggande måste vi bara göra något som följande:

 var myModelView = {name: 'Pedro Perez'};

Som vi ser det är det inte alls komplext, vi definierar helt enkelt en variabel och lägger ett stilinnehåll på den. JSON.
Nu vägen objektorienterad tillåter oss att skapa metoder för åtkomst och manipulation av de egenskaper som vi vill placera i vår ViewModel, för detta kan vi göra något liknande följande:

 var myOOOOOOFModelView = function () {var self = this; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = function () {return self.name + '' + self.last name; };};

Om vi ​​vill i det här fallet kan vi direkt komma åt namnet eller efternamnet individuellt eller använda metoden hämta namn () som ger oss namnet och efternamnet sammanfogat eller sammanfogat.
Här kan många undra om det inte var lättare att göra ett solo Sträng Med namn och efternamn är svaret väldigt enkelt, ju fler alternativ vi har, desto enklare kommer applikationen att vara i vår uppfattning, föreställ dig att vi bara ville ha namnet, med grundformen skulle vi ha behövt bearbeta strängen för att vara kunna separera dem, i objektorienterad förändring får vi bara tillgång till den egendom som intresserar oss.
Hittills är det vi har sett väldigt statiskt, tänk om vi nu börjar använda parametrar, på detta sätt a ViewModel Det kan tjäna många syften, eftersom vi inte kommer att begränsa oss till det vi fastställer, men vi kan ändra data enligt situationen.
Låt oss skriva om vår form objektorienterad, och vi kommer att använda följande formulär:

 var myOOOOOOOFModelView = funktion (förnamn, efternamn) {var self = this; self.name = namn; self. efternamn = efternamn; self.getName = function () {return self.name + '' + self.last name; };};

Som vi kunde se var det väldigt enkelt att implementera användningen av parametrar, nu ska vi implementera detta i vårt första exempel och därmed se hur allt passar på plats, för detta kommer vi att använda följande HTML -kod:

 Installera Knockout.js 

Här är det första vi märker att databindning det är inte längre text som i det första exemplet om inte vi använder html, detta gör att vi kan skicka etiketter html och därmed kunna ge mer stil till vårt svar från ViewModel.
Redan i det avsnitt där vi definierar vår ViewModel vi ser det innan vi applicerar bindande av Knockout.js, vi gör en instans av vår ViewModel objektorienterad, Det är vid denna punkt där vi kan ge värdena till våra parametrar eller egenskaper, som vi kan se höll vi vår separering av namn och efternamn men i slutändan kan vi använda metoden som sammanfogar dem.
När vi kör vårt exempel ger det oss följande resultat i webbläsaren:

Det kommer att finnas de som undrar vad denna ram har som den inte redan erbjuder AngularJS eller Backbone.js, och de har rätt i sin ifrågasättning, men svaret vi ger dem är att det bara är ytterligare ett alternativ som de kan ha till sitt förfogande, det har sina styrkor som bra dokumentation och den låga vikten av dess genomförande (endast cirka 20 kb), men som allt är alla fritt att välja det verktyg som gör att de kan uppnå sina mål och som bäst passar just nu.
Med detta avslutar vi vår handledning, vi har framgångsrikt tagit våra första steg med Knockout.js, med detta kan vi börja tänka på alla möjligheter som denna applikationsutvecklingsram ger oss logik på klientsidan.