Share
Ce veți creaÎn ultima sesiune, am construit o funcție "Adăugați un blog nou", iar utilizatorii pot posta acum în sistemul de bloguri. O extensie naturală ar fi să le permită utilizatorilor să schimbe și să ștergă blogurile existente. În această sesiune, vom construi câteva teme pentru aceste funcții, făcând o listă a blogurilor în pagina de administrare și adăugând un router (dacă nu știți ce este un router, această sesiune este pentru dvs.).
Ca de obicei, să începem prin adăugarea unui șablon HTML la admin.html. Acest lucru ar trebui să fie destul de ușor pentru dvs. acum - într-adevăr similar cu # bloguri-TPL în index.html. Singura diferență este că facem o masă de data aceasta:
În mod similar, creați un BlogsAdminView în admin.js. Dacă nu sunteți familiarizați cu acestea, vă recomandăm să verificați posturile mele anterioare.
Accentsconagua
var Blogs = Parse.Collection.extend (model: Blog), BlogsAdminView = Parse.View.extend (template: Handlebars.compile ($ ('blogs-admin-tpl' function () var collection = blog: this.collection.toJSON (); acest $. el.html (this.template (collection)););Pentru a vedea lista, trebuie să o redați. Să o adăugăm doar la face() funcția în WelcomeView deocamdata:
render: funcția () var attributes = this.model.toJSON (); . Acest el.html $ (this.template (atribute)); var blogs = Bloguri noi (); blogs.fetch (succes: funcția (bloguri) var blogsAdminView = bloguri noiAdminView (colecție: bloguri); blogsAdminView.render (); $ (' eroare: funcție (bloguri, eroare) console.log (eroare);); Verificați pagina de administrare și veți vedea o listă de vizualizare de mai jos Adăugați un blog nou buton.
Dacă urmăriți, sper că acum vă simțiți confortabil să scrieți și să citiți din baza de date. De asemenea, este ușor să creați și să creați vizualizări pentru a prezenta datele pe care le obțineți. Cu toate acestea, puteți începe să simțiți că ar putea exista prea multe View.render () funcționează aici și acolo și ar putea face ca codul dvs. să fie greu de citit și de întreținut. S-ar putea să vă simțiți rău și să vedeți admin.html în URL.
Gândindu-ne la funcția de editare pe care o vom construi, cu siguranță putem să o construim prin adăugarea de evenimente și trecerea în blogul pe care dorim să îl editați ca obiect și apoi redat. Dar nu ar fi minunat dacă putem avea ceva de genul http://AnExampleDomain.net/edit/id? Ideea unui router ne va ajuta să realizăm acest lucru. Este o modalitate de a mapa funcțiile la adresele URL.
Pentru a vă ajuta să învățați acest concept, de ce să nu continuăm și să lansăm un nou router admin.js:
var BlogRouter = Parse.Router.extend (// Aici puteți defini unele variabile partajate initialize: function (opțiuni) this.blogs = new Blogs ();, // Aceasta se execută când pornim routerul. pentru a incepe: function () Parse.history.start (pushState: true);, // Aici gasesti functiile url-urilor.// Doar adauga 'URL pattern': ' nume de serviciu rute: 'admin': 'admin', 'login': 'login', 'add': 'add', 'edit /: url' , login: funcția () , adăugați: funcția () , editați: funcția (url) ), blogRouter = nou BlogRouter (); blogRouter.start ();
După cum puteți vedea, este ușor să măriți modelele de adrese URL pentru funcțiile dintr-un router și să o porniți. Acum, dacă un utilizator vizitează / admin, aceasta va declanșa admin () funcţie.
Rețineți că puteți lua chiar și parametrii în adresele URL adăugând un colon înaintea unui nume de variabilă, cum ar fi edita /: url în codul de mai sus.
Acum, hai să facem câțiva pași pentru a reorganiza codul nostru existent în router.
Cea mai ușoară ar trebui să fie /Logare pagină. Doar mutați codul de redare în Logare() funcţie:
login: funcția () var loginView = noua LoginView (); loginView.render (); $ ( 'Main-container.') Html (loginView.el).;
Apoi, să scriem o funcție pentru / admin pagină. Anterior, atunci când utilizatorii au vizitat /admin.html, le-am trimis în mod implicit la ecranul de conectare. Și dacă s-au conectat cu succes, i-am trimis apoi pe ecranul de întâmpinare. Funcția de redare pentru welcomeView a fost în apelul de succes. Nu este cel mai bun mod de a vă organiza codul și acest lucru nu este convenabil pentru utilizatorul dvs..
Deci, acum, să facem o verificare / admin pagină. Dacă sunt conectați, îi afișăm pagina de întâmpinare și, dacă nu, le redirecționăm /Logare.
admin: function () // Acesta este modul in care puteti obtine utilizatorul curent in Parse var currentUser = Parse.User.current (); if (! currentUser) // Acesta este modul în care puteți face redirecționarea url în JS blogRouter.navigate ('login', trigger: true); altfel var welcomeView = new WelcomeView (model: currentUser); welcomeView.render (); $ ( 'Main-container.') Html (welcomeView.el).; // Schimbați-l la acest.blogs astfel încât să stocheze conținutul pentru alte Vizualizări // Amintiți-vă să îl definiți în BlogRouter.initialize () this.blogs.fetch (success: function (blogs) var blogsAdminView = noi BlogsAdminView colecție: bloguri); blogsAdminView.render (); $ ('. main-container'); append (blogsAdminView.el); error: funcția (bloguri, eroare) console.log ; După cum puteți vedea în cod, folosim blogRouter.navigate () pentru a le redirecționa către /Logare pagină. În mod similar, să schimbăm funcția de redare în /Logare vizualizează în blogRouter.navigate () și funcția:
Parse.User.logIn (nume de utilizator, parolă, // Dacă numele de utilizator și parola corespund succesului: funcția (utilizator) blogRouter.navigate ('admin', trigger: true); eroare: funcție (utilizator, eroare) console.log (eroare);); Nu uitați să scoateți funcțiile vechi de redare din codul anterior.
Să încercăm aceste două funcții. Testează și ... nimic! Asta pentru că trebuie să ne îndreptăm / admin la început; admin.html de la sine nu se potrivește cu niciun model de adresă URL pe care l-am setat în router.
Să adăugăm o valoare implicită pentru a naviga la start() astfel încât atunci când ruterul pornește, acesta va duce automat la utilizator / admin pagină:
start: funcția () Parse.history.start (pushState: true); this.navigate ("admin", trigger: true); Acum, dacă încercați, totul ar trebui să funcționeze corect:
Observați că încă nu puteți vizita direct / admin sau /Logare inca. Și dacă vă puneți proiectul într-un director, probabil veți observa că adresa URL va redirecționa de la http: //localhost/directory/admin.html la http: // localhost / admin și pare ciudat. Vom acoperi și vom rezolva aceste probleme în sesiunile viitoare. Astăzi, obiectivul nostru principal este să înțelegem cum funcționează routerul odată ce acesta începe, și să pună la punct anumite teme.
Mergând mai departe, este timpul să mutați randarea paginii "Adăugați un blog nou" WelcomeView la router.
BlogRouter = Parse.Router.extend (... adăugați: funcție () var addBlogView = new AddBlogView (); addBlogView.render (); $ ('.s main-container'); html (addBlogView.el); )De asemenea, putem rescrie evenimentul în WelcomeView pentru a declanșa o navigare:
WelcomeView = Parse.View.extend (template: Handlebars.compile ($ ('welcome-tpl'). Html ) rRuter.navigate ('add', trigger: true);, render: function () var attributes = this.model.toJSON () ;. $ el.html (this.template (atribute) ;)Acum, verificați și asigurați-vă că totul funcționează.
În această sesiune, am făcut o altă vizualizare a blogurilor din panoul de administrare și ați aflat despre conceptul important al unui router. Sper că acum este natural să creați și să vizualizați vizualizări cu Parse.js. Și ați început să vedeți cum un router ne poate ajuta să organizăm și să reutilizăm codul nostru.
Nu am sapat in detaliile mecanicilor routerului, cum ar fi intelegerea de ce trebuie sa avem trigger: true. După cum am menționat mai devreme, scopul acestui tutorial este să vă arate cum puteți face lucrurile să funcționeze. Dar dacă sunteți interesat să aflați mai multe, verificați cu siguranță documentația. Vom acoperi, de asemenea, mai multe cunoștințe despre router atunci când avem nevoie mai târziu în serie.
În următoarea sesiune, vom crea un /Editați | × pagina, și a pus router-ul la o utilizare reală. Sper că ești încântat să o faci. În curând vom trage totul împreună, deci stați liniștiți!
