Ce este un knock-out?
Dacă vorbim despre knock-out, nu voi intra în detalii, ci pur și simplu enumera cele patru principii de bază ale cadrului sunt descrise pe site-ul oficial:
- Declarativă de legare (declarativă de legare);
- actualiza automat interfața cu utilizatorul atunci când modificați proprietățile obiectului (e) (Automatic UI update). Aceleași lucrări de principiu INotifyPropertyChanged în Silverlight si WPF;
- Dependență (urmărire Dependență);
- Șabloane (templating).
Fiecare dintre aceste principii într-un fel sau altul (și, în unele cazuri, chiar și de câteva ori) au fost prezentate publicului într-o formă sau alta. Există o mulțime de controale, cadre și suprastructuri pe rețea, dar când a existat o knock-out (denumită în continuare „ko“ sau „knock-out“), care combină toate cele de mai sus într-o singură, care este numit un flacon, de dezvoltare pe HTML 5 a devenit o adevărată plăcere.
Problemă de exemplu folosind Knockout
Gata de decolare
Crearea unui proiect nou.
Apoi, trebuie să actualizați toate pachetele pentru acest lucru, rulați comanda update-Package - o actualizare la consola Nuget Manager. Noul proiect șablon MVC4 Fișierul există deja knock-out. *. Js. Și dacă vă decideți să utilizați MVC3, atunci va trebui să instalați un opțional pachet nuget-knock-out Ca urmare a listei pentru a obține mai multe actualizări și asta în ciuda faptului că studioul a venit mai puțin de o lună în urmă (pentru abonații MSDN):
Adăugați un alt MvcTools pachet:
Am scos imediat fișier _Layout.cshtml. și a apărut după instalarea acestui pachet de _LayoutExtended.cshtml setat ca implicit de start-up. Acest lucru se face în fișierul _ViewStart.cshtml:
proiectul nu va începe acum, este necesar să se stabilească un nou șablon „_LogOnPartial“ pe (nou pentru fișierul MVC4) „_LoginPartial“. Și acum, este suficient să se înlocuiască codul din partea de jos a paginii:
un nou (din nou, pentru că vom folosi MVC4, pentru MVC3 nimic nu ar trebui să fie schimbat în șablon principal):
Puțin mai târziu, în această listă vom adăuga script-uri pentru a knock-out. Pornește proiectul - Da! Am început.
Notă: Aspectul șablonului modificat nu este atât de fierbinte, dar ce libertatea de creativitate! Nu lăsați șablonul implicit. Dar, de fapt, am avut încă timp să remake-pachet nuget MVC4.
Acum am pus un alt Knockout.Mapping pachet:
Și apoi un alt pachet:
În Scripts directorul de fișiere au fost de brand nou, și vom crea un dosar pentru a stoca Js la script-uri care se vor scrie. Și acum a pus în afara până la acest dosar în „partid“.
Din nou, modelul? Da, pentru că MVC
Să creeze un simplu FeedbackViewModel clasă. care va fi completat de către utilizator pentru a trimite formularul de feedback:
AjaxController
Creați un nou controler numit AjaxController. acesta va fi moștenită de la controler de clasa de baza (WebAPI Pro ApiController și vom vorbi data viitoare).
Astfel, o metodă care returnează o listă a mesajelor:
Reprezentări (vizualizare)
Acum, să modificăm pagina principală. Index.cshtml deschide și eliminarea tuturor inutile lăsați următorul marcaj. Aceasta este forma principală vom trimite mesaje (feedback). Astfel, marcajul:
În continuare, vom construi pe ea. Acum, conectați knock-out, și tot ce este necesar pentru activitatea sa în proiectarea layout pe baza prezentării specifice (vizualizare) a fost suficient pentru a conecta doar script-ul ViewModel'om acest punct de vedere. Sa dovedit, nu atât de clar, și atât de rău pentru jocul de cuvinte. În cursul va continua să fie mai clare.
Din moment ce sunt utilizați, puteți utiliza MVC4 Grupări (acest lucru este ceva nou și foarte util din ceea ce părea a MVC4). În dosarul App_Start are fișier BundleConfig.cs.
Rețineți numărul liniei 2. _LayoutExtended.cshtml șablonul principal avem un șir de caractere:
Acest lucru înseamnă că toate script-urile sunt înregistrate în acest pachet (din mănunchiul engleză - „pachet“) va fi descărcat în toate paginile site-ului. Voi adăuga doar la acest pachet cateva linii:
Sunt dependent de un obicei dintr-o dată, care se numește „gramada sus“: și el a knock-out, precum și extinderea și cartografiere intrare validarea pentru knock-out. Deși nu este necesar pentru un astfel de proiect (dar acum știi despre aceste extensii). Acum pot verifica dacă script-urile sunt încărcate knock-out:
Acum vom începe, de fapt, programarea în sine.
Prefer să împartă funcționalitate pentru fișiere diferite, cu atât mai mult în MVC4 a avut un astfel de lucru minunat ca minimalizării și ambalare (Grupări). Am creat un fișier site.core.js. care a pregătit un înveliș pentru a lucra cu jQuery.Ajax. Asta face parte din codul de fișier:
De asemenea, am creat un fișier site.services.feedback.js. Acest fișier conține direct-serviciul de date, care va fi folosind un înveliș pentru a accesa metodele site.services.ajax AjaxController:
Să acorde o atenție la liniile 17 și 23, este în ele, și a provocat metodele controlerului.
Și, strict vorbind, un alt fișier site.vm.feedback.js. care este deja ViewModel'om să reprezinte Index.cshtml:
Acest ViewModel se poate descărca în continuare numai lista de subiecte pentru rapoarte, vom modifica ulterior. Apelează această listare - "Model 1". Articolul din aval, mă voi referi la ea.
Pentru a conecta aceste script-uri de pe pagina Index.cshtml prescrie următorul cod în partea de jos a paginii, să nu intervină:
Bibliotecile sunt de încărcare (model principal), script-uri conectate (la pagina Index.cshtml) - Du-te la cel mai de marcare.
Declarativă de legare (declarativă de legare)
Acum, partea distractivă. Voi încerca să explice ce este un caracter obligatoriu declarativ (MVVM), cu un exemplu concret. Pentru a începe, adăugați un cod care se va afișa în forma numelui (vezi „Model 1“ linia 15.) și numărul de mesaje descărcate (vezi „Model 1“ linia 17.):
Asta e modul în care nezateylevym folosind HTML5 atributul „... a datelor“, o poți face. Titlul prezentării este legat de HTML markup în linia 5, numărul de încărcat - pe linia 7. Și iată cum arată:
Acum, afișează o listă de subiecte în celulă
- . Pentru aceasta va trebui să utilizați un șablon. Binecuvântarea că, deoarece versiunea 2.0 adauga suport pentru proprii (nativeTemplateEngine) șabloane knock-out. Codul pentru a afișa o listă a mesajelor folosind template-uri knock-out:
Adăugat element de listă (a se vedea. Șirul 6) folosește modelul (a se vedea. Liniile 13-15). Acum se pare ca:
Excelent! Asta e doar am nevoie de o listă drop-down. Ușor de modificat elementul și se leagă la un nou tip:.
Am eliminat
- împreună cu un șablon și a pus