Sadržaj
Prijenos najtežeg dijela aplikacije na klijentsku stranu sve je češći, pa se poslužiteljski jezici preusmjeravaju samo na one koji rješavaju postojanost putem usluga ODMOR.Dio odgovornosti da se sve to dogodi pada na nove načine rada JavaScript i generiranje dinamičkih i responzivnih korisničkih sučelja, zahvaljujući različitim okvirima postojanje.
Ovaj okvir ima mnoge prednosti, poput male težine i dokumentacije, kao i da je već duže vrijeme na tržištu pa je dosljedno sazrijevao kako bi se mogao primijeniti u proizvodnim okruženjima.
1- Kao i većina knjižnica i okvira JavaScript zahtjevi nisu toliko zahtjevni, u ovom slučaju trebat će nam mali web poslužitelj za bolju obradu naših zahtjeva, može biti Wamp u Windows ili primjer Apač u Linux ili Mac.
2- Potreban nam je uređivač bogatog teksta u stilu Uzvišen tekst ili NotePad ++ kako bi mogli napisati potreban kôd za ispunjavanje primjera i vježbi koje ćemo prikazati.
3- Konačno nam je potreban pristup internetu da bismo mogli preuzeti Knockout.js barem jednom.
Postupak instalacije je prilično jednostavan i ne ovisi o određenoj platformi, postupak će biti isti bez obzira na to jesmo li Windows, Linux ili MAC.
Prvo što moramo učiniti je preuzeti Knockout.js sa njegove službene stranice, za to možemo otići na web stranicu projekta i u odjeljak Preuzimanja kliknemo desnom tipkom miša i odaberemo opciju Spremi link kao:
POVEĆAJTE
Nakon što imamo datoteku, jednostavno je moramo uključiti u datoteku HTML kako slijedi:
Instaliranje Knockout.jsKao što vidimo, preuzetu datoteku morali smo uključiti samo kroz oznaku skripte. U slučaju da želimo raditi s verzijom CDN Moramo samo promijeniti lokalni put na internetski put datoteke, to je vrlo slično radu s knjižnicama kao što su jQuery ili okviri poput AngularJS.
Model View View ModelNaslov ovog odjeljka može se činiti kao pogreška. Kako je moguće govoriti o modelu View View Model? Nije isto? Ispostavilo se da Nokautirati ima obrazac dizajna ili razvojnu paradigmu odakle ima inspiraciju MVC, gdje je zasigurno Model i Pogled ponašaju se poput onoga što znamo iz "klasičnog" pristupa, međutim imamo novi sloj koji se zove ViewModel koja je zadužena za ujedinjenje i davanje funkcionalnosti našim pogledima.
Vezivanje podataka je glavna karakteristika našeg okvira koja nam omogućuje da ukažemo na dokument HTML koji su elementi kojima morate omogućiti pristup Knockout.js, iako zvuči kao nešto složeno, možemo ga sažeti kao nešto jednostavnije, to je jednostavna primjena svojstava na elemente stabla SUNCE gdje želimo da ima performanse Knockout.js.
Pogledajmo sljedeći primjer koda, recimo da želimo ispisati ime iz našeg ViewModel na naljepnici unutar tijelo, za to moramo učiniti samo sljedeće:
Instaliranje Knockout.jsTo vidimo unutar naše etikete h1 postoji oznaka span i oznaka span ima svojstvo za koje nije izvorno HTML koje je vlasništvo vezanje podataka, to je ono što nas povezuje Knockout.js s našim DOM stablo u ovom slučaju jednostavno smo naznačili da ime svojstva ili varijable treba uzeti iz našeg ViewModel.
Ako pokrenemo naš primjer u pregledniku, dobit ćemo rezultat poput onog koji možemo vidjeti na sljedećoj slici:
Dosad smo morali shvatiti tu filozofiju ViewModel važan je dio posla u Knockout.js, zato ćemo se nastaviti još malo baviti tom temom.
Stvaranje VistaModelaPostoje dva načina za stvaranje modela, osnovni oblik i objektno orijentirani, koji već koristimo ovisi o našem načinu razvoja, iako je preporučeni objektno orijentirano budući da nam je u početku složenije što nam omogućuje postizanje boljeg reda u našoj primjeni.
Za stvaranje a ViewModel osnovno, samo moramo učiniti nešto poput sljedećeg:
var myModelView = {name: 'Pedro Perez'};Kako vidimo, uopće nije složeno, jednostavno definiramo varijablu i na nju postavljamo sadržaj stila. JSON.Sada put objektno orijentirano omogućuje nam stvaranje metoda pristupa i manipulacije svojstvima koja želimo postaviti u svoju ViewModel, za to možemo učiniti nešto poput sljedećeg:
var myOOOOOOFModelView = function () {var self = this; self.name = 'Jonathan'; self.lastname = 'Acosta'; self.getName = function () {return self.name + '' + self.last name; };};Ako želimo, u ovom slučaju možemo izravno pristupiti imenu ili prezimenu pojedinačno, ili koristiti metodu getName () to nam daje ime i prezime spojeno ili spojeno.Ovdje se mnogi mogu zapitati nije li bilo lakše napraviti solo Niz S imenom i prezimenom, odgovor je vrlo jednostavan, što više mogućnosti imamo, aplikacija će po našem mišljenju biti jednostavnija, zamislite da smo samo htjeli ime, s osnovnim oblikom koji bismo morali obraditi kako bi niz bio kad ih možemo odvojiti, u objektno orijentiranoj promjeni pristupamo samo nekretnini koja nas zanima.
Do sada je ono što smo vidjeli vrlo statično, što ako sada počnemo koristiti parametre, na ovaj način a ViewModel Može poslužiti u mnoge svrhe, jer se nećemo ograničiti na ono što utvrdimo, ali možemo promijeniti podatke prema situaciji.
Prepravimo svoj oblik objektno orijentirano, a mi ćemo koristiti sljedeći obrazac:
var myOOOOOOOFModelView = funkcija (ime, prezime) {var self = this; self.name = ime; self.lastname = prezime; self.getName = function () {return self.name + '' + self.last name; };};Kao što smo mogli vidjeti, bilo je vrlo jednostavno implementirati upotrebu parametara, sada ćemo to implementirati u naš prvi primjer i tako vidjeti kako se sve uklapa na svoje mjesto, za to ćemo koristiti sljedeći HTML kôd:
Instaliranje Knockout.jsOvdje prvo primjećujemo da je vezanje podataka više nije tekst kao u početnom primjeru ako ne koristimo html, to nam omogućuje slanje naljepnica html i na taj način moći dati više stila našem odgovoru iz ViewModel.
Već u odjeljku gdje definiramo naše ViewModel vidimo da prije primjene obvezujući od Knockout.js, pravimo primjer našeg ViewModela objektno orijentirano, Na ovom mjestu možemo dati vrijednosti našim parametrima ili svojstvima, kao što vidimo kako smo zadržali razdvajanje imena i prezimena, ali na kraju možemo upotrijebiti metodu koja ih povezuje.
Kad pokrenemo naš primjer, on nam daje sljedeće rezultate u pregledniku:
Ovim smo završili naš vodič, uspješno smo napravili prve korake Knockout.js, s ovim možemo početi razmišljati o svim mogućnostima koje nam ovaj okvir za razvoj aplikacija nudi s logikom na strani klijenta.
