Aan de slag met Knockout.js

De overdracht van het moeilijkste deel van de applicatie naar de clientzijde wordt steeds gebruikelijker, waardoor servertalen worden gedegradeerd tot alleen die talen die persistentie afhandelen via services RUST UIT.
Een deel van de verantwoordelijkheid om dit alles te laten gebeuren ligt bij de nieuwe manieren van werken met JavaScript en het genereren van dynamische en responsieve gebruikersinterfaces, dankzij de verschillende kaders bestaande.
Dit raamwerk heeft veel sterke punten zoals het lage gewicht en de documentatie, maar ook dat het al heel lang op de markt is, dus het is consequent volwassen geworden om in productieomgevingen te kunnen worden toegepast.
1- Zoals de meeste bibliotheken en frameworks van JavaScript de vereisten zijn niet zo veeleisend, in dit geval hebben we een kleine webserver nodig om onze verzoeken beter te verwerken, het kan zijn Wamp in ramen of een instantie van Apache in Linux of Mac.
2- We hebben een rich text-editor nodig in de stijl van Sublieme tekst of Kladblok ++ om de nodige code te kunnen schrijven om te voldoen aan de voorbeelden en oefeningen die we zullen laten zien.
3- Eindelijk hebben we internettoegang nodig om te kunnen downloaden Knockout.js zelfs eens.
Het installatieproces is vrij eenvoudig en is niet afhankelijk van een specifiek platform, het proces zal hetzelfde zijn, of we nu lid zijn Windows, Linux of MAC.
Het eerste wat we moeten doen is downloaden Knockout.js van de officiële pagina, hiervoor kunnen we naar de projectwebsite gaan en in de sectie van downloads we klikken met de rechtermuisknop en selecteren de optie Link opslaan als:

VERGROTEN

Het is belangrijk dat we het bestand opslaan in een map die relevant is voor ons project om het op te nemen. Het kan ook worden geïnstalleerd met behulp van Prieel of gebruik het zelfs van een van de CDN's services om onze server niet als bibliotheekrepository te hoeven gebruiken.
Zodra we het bestand hebben, hoeven we het alleen maar in een bestand op te nemen HTML als volgt:

 Knockout.js installeren 

Zoals we kunnen zien, hoefden we het gedownloade bestand alleen via een scripttag op te nemen. Voor het geval we willen werken met de versie van de CDN We hoeven alleen het lokale pad naar het internetpad van het bestand te veranderen, dit lijkt erg op het werken met bibliotheken zoals: jQuery of kaders zoals AngularJS.
Model bekijken Model bekijkenDe titel van deze sectie lijkt misschien een vergissing. Hoe is het mogelijk om over Model View View Model te praten? Het is niet hetzelfde? Blijkt dat Knock out heeft een ontwerppatroon of ontwikkelingsparadigma waar het inspiratie uit haalt MVC, waar zeker de Model en de Weergave ze gedragen zich als wat we kennen van de "klassieke" benadering, maar we hebben een nieuwe laag genaamd BekijkModel die verantwoordelijk is voor het verenigen en het geven van functionaliteit aan onze opvattingen.
Dataverbinding is het belangrijkste kenmerk van ons raamwerk waarmee we aan het document kunnen aangeven HTML wat zijn de elementen waartoe u toegang moet geven? Knockout.js, hoewel het klinkt als iets ingewikkelds, kunnen we het samenvatten als iets eenvoudiger, het is de eenvoudige toepassing van eigenschappen op de elementen van de boom ZON waar we willen dat het presteert Knockout.js.
Laten we de volgende voorbeeldcode bekijken, laten we zeggen dat we een naam willen afdrukken uit onze BekijkModel op een etiket in de lichaam, hiervoor hoeven we alleen het volgende te doen:

 Knockout.js installeren 

Dat zien we binnen ons label h1 er is een span-tag en de span-tag heeft een eigenschap die niet eigen is aan HTML wat is het eigendom? data-bind, dit is wat ons verbindt Knockout.js met onze DOM-boom in dit geval hebben we eenvoudigweg aangegeven dat de naam van de eigenschap of variabele moet worden overgenomen uit onze BekijkModel.
Als we ons voorbeeld in de browser uitvoeren, krijgen we een resultaat zoals we in de volgende afbeelding kunnen zien:

Hiermee hebben we onze eerste applicatie al gemaakt met behulp van Knockout.js.
Inmiddels moeten we ons gerealiseerd hebben dat filosofie BekijkModel is een belangrijk onderdeel van het werk in Knockout.js, daarom gaan we ons nog wat verder verdiepen in het onderwerp.
Creatie van VistaModelEr zijn twee manieren om een ​​modelweergave te maken, de basisvorm en de objectgeoriënteerde, welke we al gebruiken, hangt af van onze manier van ontwikkelen, hoewel de aanbevolen object georiënteerd want hoewel het in het begin ingewikkelder is, kunnen we een betere volgorde in onze applicatie bereiken.
om een ​​te maken BekijkModel basic moeten we gewoon iets als het volgende doen:

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

Zoals we het zien, is het helemaal niet ingewikkeld, we definiëren gewoon een variabele en plaatsen er een stijlinhoud op. JSON.
Nu de weg object georiënteerd stelt ons in staat om methoden te creëren voor toegang en manipulatie van de eigenschappen die we in onze . willen plaatsen BekijkModel, hiervoor kunnen we iets als het volgende doen:

 var myOOOOOOOFModelView = functie () {var zelf = dit; zelf.naam = 'Jonathan'; zelf.achternaam = 'Acosta'; self.getName = function () {return self.name + '' + self.achternaam; };};

Als we dat willen, kunnen we in dit geval rechtstreeks toegang krijgen tot de naam of achternaam, of de methode gebruiken getName () dat geeft ons de naam en achternaam samengevoegd of aaneengeschakeld.
Hier zullen velen zich afvragen of het niet makkelijker was om een ​​solo te maken Draad Met de voor- en achternaam is het antwoord heel eenvoudig, hoe meer opties we hebben, hoe eenvoudiger de applicatie naar onze mening zal zijn, stel je voor dat we alleen de naam wilden, met de basisvorm zouden we de string moeten verwerken om te worden in staat om ze te scheiden, hebben we bij objectgeoriënteerde verandering alleen toegang tot het eigendom dat ons interesseert.
Wat we tot nu toe hebben gezien is erg statisch, wat als we nu parameters gaan gebruiken, op deze manier a BekijkModel Het kan vele doelen dienen, omdat we ons niet zullen beperken tot wat we vaststellen, maar we kunnen de gegevens aanpassen aan de situatie.
Laten we onze vorm herschrijven object georiënteerd, en we zullen het volgende formulier gebruiken:

 var myOOOOOOOFModelView = functie (voornaam, achternaam) {var self = this; zelf.naam = naam; zelf.achternaam = achternaam; self.getName = function () {return self.name + '' + self.achternaam; };};

Zoals we konden zien was het heel eenvoudig om het gebruik van parameters te implementeren, nu gaan we dit in ons eerste voorbeeld implementeren en dus kijken hoe alles op zijn plaats past, hiervoor zullen we de volgende HTML-code gebruiken:

 Knockout.js installeren 

Hier is het eerste wat ons opvalt dat de data-bind het is niet langer tekst zoals in het eerste voorbeeld, zo niet gebruiken we html, hierdoor kunnen wij labels versturen html en zo meer stijl te kunnen geven aan onze reactie van de BekijkModel.
Al in de sectie waar we onze . definiëren BekijkModel we zien dat voordat we de toepassen verbindend van Knockout.js, we maken een instantie van ons ViewModel object georiënteerd, Het is op dit punt waar we de waarden aan onze parameters of eigenschappen kunnen geven, zoals we kunnen zien, hebben we onze scheiding van naam en achternaam behouden, maar uiteindelijk kunnen we de methode gebruiken die ze samenvoegt.
Wanneer we ons voorbeeld uitvoeren, geeft het ons de volgende resultaten in de browser:

Er zullen mensen zijn die zich afvragen wat dit raamwerk heeft dat het nog niet biedt AngularJS of Backbone.js, en ze hebben gelijk in hun vragen, maar het antwoord dat we ze geven is dat het nog maar een optie is die ze tot hun beschikking kunnen hebben, het heeft zijn sterke punten zoals goede documentatie en het lage gewicht van de implementatie (slechts ongeveer 20 kb), Maar zoals bij alles is het iedereen vrij om de tool te kiezen waarmee hij zijn doelstellingen kan bereiken en die het beste past bij de eisen van het moment.
Hiermee sluiten we onze tutorial af, we hebben met succes onze eerste stappen gezet met Knockout.js, hiermee kunnen we beginnen na te denken over alle mogelijkheden die dit framework voor applicatieontwikkeling ons biedt met logica aan de clientzijde.