De data aceasta vom fi familiarizați cu DurandalJS, care este cadrul de bază pentru site-ul nostru, construit folosind arhitectura aplicației Single Page. Articolul va descrie principiile și regulile de bază pentru construirea unei aplicații pe DurandalJS.
Privind înapoi
Aspectul paginii principale (șablon)
Din moment ce modulul principal main.js rulează shell-ul shell-ului în mod implicit. care constă dintr-un model de vizualizare și o vedere (shell.js și shell.html). Shell.html este, ca să spunem așa, un "punct de intrare" pentru un afișaj vizual. În opinia mea, acesta este cel mai potrivit loc pentru a găzdui un șablon de site web (design layout). Aici vom forma principalul tip de site.
În prezent este foarte simplu:
Linia 2 este legată de obiectul routerului. Rețineți că în ultimul articol am descris rutele:
Deci, acest BindingHandler leagă rutele noastre de marcaj. Deoarece avem rute, să le menționăm:
În linia 3, am adăugat o legare prin foreach la modelul de navigație (router.navigationModel) al lui DurandalJS. Vedeți ce este afișat pe pagină:
Vreau să experimentez puțin. Să creăm un fișier nou, îl voi numi footer.html și îl voi pune imediat, alături de fișierul home.html.
Mai departe, în shell.html, modificăm marcajul la:
Mi se pare, nu este greu să ghicesc ce ar trebui să se întâmple pe termen lung:
Exact ceea ce am vrut. Acum șablonul de pagină principală este format din două fișiere (vederi). Deci, puteți transfera rutele în fișierul footer.html. După transferul de la începutul site-ului, am văzut aceeași imagine ca și în prima captură de ecran.
Toate cererile posibile de compunere pot fi găsite pe site-ul web DurandalJS, unde pe lângă aceste informații există și o grămadă de materiale utile.
Să adăugăm acum câteva stiluri la markup pe baza regulilor de bootstrap. La mine, meniul unui site sa dovedit astfel:
Există două elemente în meniul meu, ambele fiind listate ca rute în variabila traseelor:
Alocat 22 de termeni nu sunt accidentale. Acest marcaj se realizează isNavigating proprietatea de legare a router-ului la obiect în momentul schimbării traseului activ pentru un nou baruri spectacol de progres, în cazul meu, este afișat progessBar dintr-un set de schimb de lucru componente bootstrap exemplu poate fi văzut pe exemplul site-ului.
Despre pagina proiectului
În lista de rute am o cale către pagina "despre proiect", dar până acum nu există un astfel de modul și prezentare. Să o creăm. În acest scop, în folderul / views / site / Creez o reprezentare a modulului about.html:
Așa arată pagina "despre proiect"
concluzie
Ca o concluzie la acest articol, vreau să vorbesc despre planuri viitoare. Următoarea etapă, cea mai interesantă în opinia mea, lucrează cu datele, mai degrabă cu baza de date prin API-ul Web. Nu doar API-ul Web, ci prin BreezeJS. Deși acest lucru nu este în întregime legat de DurandalJS, deoarece DurandalJS este doar un instrument pentru atingerea scopului. Scopul este de a face un site web cu interpretarea numelor.
Ce inseamna asta? Nume 1: Cream un nou site pe principiul aplicatiei Single Page
Ce inseamna numele 3: Baza de date pentru SPA sau Code First in EntityFramework
Articole similare
Trimiteți-le prietenilor: