Începeți cu Knockout.js

Transferul celei mai dificile părți a aplicației către partea clientului devine din ce în ce mai frecvent, retrogradând astfel limbile serverului ca fiind doar cele care gestionează persistența prin servicii ODIHNĂ.
O parte din responsabilitatea ca toate acestea să se întâmple revine noilor moduri de lucru JavaScript și generarea de interfețe de utilizator dinamice și receptive, datorită diferitelor cadre existent.
Acest cadru are multe puncte forte, cum ar fi greutatea redusă și documentația sa, precum și faptul că a fost pe piață de mult timp, astfel încât a fost maturizat în mod constant pentru a putea fi aplicat în mediile de producție.
1- La fel ca majoritatea bibliotecilor și cadrelor din JavaScript cerințele nu sunt atât de solicitante, în acest caz vom avea nevoie de un server web mic pentru a procesa mai bine solicitările noastre, poate fi Wamp în Windows sau o instanță de Apache în Linux sau Mac.
2- Avem nevoie de un editor de text bogat în stilul Text sublim sau NotePad ++ pentru a putea scrie codul necesar pentru a îndeplini exemplele și exercițiile pe care le vom arăta.
3- În cele din urmă, avem nevoie de acces la Internet pentru a putea descărca Knockout.js macar odata.
Procesul de instalare este destul de simplu și nu depinde de o anumită platformă, procesul va fi același indiferent dacă ne aflăm Windows, Linux sau MAC.
Primul lucru pe care trebuie să-l facem este să descărcăm Knockout.js de pe pagina sa oficială, pentru aceasta putem accesa site-ul web al proiectului și în secțiunea descărcări facem clic dreapta și selectăm opțiunea Salvați linkul ca:

MARI

Este important să salvăm fișierul într-un folder relevant pentru proiectul nostru pentru a-l include. De asemenea, poate fi instalat folosind Bower sau chiar folosiți-l din oricare dintre CDN-uri servicii pentru a nu trebui să folosim serverul nostru ca depozit de bibliotecă.
Odată ce avem fișierul, trebuie pur și simplu să îl includem într-un fișier HTML după cum urmează:

 Instalarea Knockout.js 

După cum putem vedea, a trebuit să includem fișierul descărcat doar printr-o etichetă de script. În cazul în care dorim să lucrăm cu versiunea CDN Trebuie doar să schimbăm calea locală către calea de internet a fișierului, acest lucru este foarte asemănător cu lucrul cu biblioteci precum jQuery sau cadre precum AngularJS.
Vizualizare model Vizualizare modelTitlul acestei secțiuni poate părea o greșeală. Cum este posibil să vorbim despre Model View View Model? Nu este același lucru? Se pare că Făcut praf are un model de proiectare sau paradigmă de dezvoltare de unde are o inspirație MVC, unde cu siguranță Model si Vedere se comportă ca ceea ce știm din abordarea „clasică”, totuși avem un nou strat numit ViewModel care este însărcinat să unească și să ofere funcționalitate opiniilor noastre.
Legarea datelor este principala caracteristică a cadrului nostru care ne permite să indicăm documentului HTML care sunt elementele la care trebuie să le dați acces Knockout.js, deși sună ca ceva complex, îl putem rezuma ca ceva mai simplu, este simpla aplicare a proprietăților asupra elementelor arborelui SOARE unde vrem să aibă performanță Knockout.js.
Să vedem următorul exemplu de cod, să presupunem că vrem să tipărim un nume de la ViewModel pe o etichetă din interiorul corp, pentru aceasta trebuie doar să facem următoarele:

 Instalarea Knockout.js 

Vedem asta în eticheta noastră h1 există o etichetă span și eticheta span are o proprietate care nu este nativă HTML care este proprietatea legare de date, asta ne face să ne conectăm Knockout.js cu a noastră Copac DOM în acest caz am indicat pur și simplu că proprietatea sau numele variabilei ar trebui să fie preluate de la ViewModel.
Dacă vom rula exemplul nostru în browser, vom obține un rezultat similar celui pe care îl putem vedea în următoarea imagine:

Cu aceasta am făcut deja prima noastră aplicație folosind Knockout.js.
Până acum trebuie să ne dăm seama de această filozofie ViewModel este o parte importantă a muncii în Knockout.js, de aceea vom continua să aprofundăm puțin mai mult pe această temă.
Crearea VistaModelExistă două moduri de a crea o Vizualizare model, forma de bază și cea orientată obiect, pe care o folosim deja depinde de modul nostru de dezvoltare, deși cel recomandat este orientat obiect deoarece deși este mai complex la început, ne permite să obținem o ordine mai bună în aplicația noastră.
Pentru a crea un ViewModel de bază, trebuie doar să facem ceva de genul:

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

După cum o vedem, nu este deloc complexă, pur și simplu definim o variabilă și plasăm un conținut de stil pe ea. JSON.
Acum drumul orientat obiect ne permite să creăm metode de acces și manipulare a proprietăților pe care dorim să le plasăm în ViewModel, pentru aceasta putem face ceva de genul:

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

Dacă dorim, în acest caz, putem accesa direct numele sau prenumele în mod individual sau putem folosi metoda getName () care ne dă numele și prenumele unite sau concatenate.
Aici mulți se pot întreba dacă nu a fost mai ușor să faci un solo Şir Cu numele și prenumele, răspunsul este foarte simplu, cu cât avem mai multe opțiuni, cu atât aplicația va fi mai simplă în viziunea noastră, imaginați-vă că am vrut doar numele, cu forma de bază ar fi trebuit să procesăm șirul pentru a fi capabili să le separăm, în schimbarea orientată obiect, accesăm doar proprietatea care ne interesează.
Până acum, ceea ce am văzut este foarte static, dacă acum începem să folosim parametri, în acest fel a ViewModel Poate servi în multe scopuri, deoarece nu ne vom limita la ceea ce stabilim, ci putem schimba datele în funcție de situație.
Să ne rescriem forma orientat obiect, și vom folosi următorul formular:

 var myOOOOOOOFModelView = funcție (prenume, prenume) {var self = this; self.name = nume; self.lastname = prenume; self.getName = function () {return self.name + '' + self.last name; };};

După cum am putut vedea, a fost foarte ușor să implementăm utilizarea parametrilor, acum vom implementa acest lucru în primul nostru exemplu și vom vedea astfel cum se potrivește totul, pentru aceasta vom folosi următorul cod HTML:

 Instalarea Knockout.js 

Aici primul lucru pe care îl observăm este că legare de date nu mai este text ca în exemplul inițial dacă nu, folosim html, acest lucru ne permite să trimitem etichete html și astfel să putem da mai mult stil răspunsului nostru din ViewModel.
Deja în secțiunea în care ne definim ViewModel vedem că înainte de a aplica legare de Knockout.js, facem o instanță a modelului nostru ViewModel orientat obiect, În acest moment putem da valorile parametrilor sau proprietăților noastre, așa cum putem vedea, ne-am păstrat separarea de nume și prenume, dar în cele din urmă putem folosi metoda care le concatenează.
Când rulăm exemplul, acesta ne oferă următoarele rezultate în browser:

Vor fi cei care se întreabă ce are acest cadru pe care nu îl oferă deja AngularJS sau Backbone.js, și au dreptate la întrebări, totuși răspunsul pe care ni-l oferim este că este doar o opțiune pe care o pot avea la dispoziție, are punctele sale forte, cum ar fi o documentare bună și greutatea redusă a implementării sale (doar aproximativ 20 kb), Dar, ca orice, toată lumea este liberă să aleagă instrumentul care le permite să își atingă obiectivele și care se potrivește cel mai bine cerințelor momentului.
Cu aceasta ne-am terminat tutorialul, am făcut cu succes primii pași cu Knockout.js, cu aceasta putem începe să ne gândim la toate posibilitățile pe care ni le oferă acest cadru de dezvoltare de aplicații cu logică de partea clientului.