Share
Hva du skal skapeI den siste økten bygde vi en "Legg til en ny blogg" -funksjon, og nå kan brukere legge inn i bloggsystemet. En naturlig forlengelse ville være å gjøre det mulig for brukere å endre og slette eksisterende blogger. I denne sesjonen skal vi bygge noe grunnlag for disse funksjonene, lage en listevisning av blogger på admin siden og legge til en ruter (hvis du ikke vet hva en router er, er denne sesjonen for deg).
Som vanlig, la oss begynne med å legge til en HTML-mal til admin.html. Dette burde være ganske enkelt for deg nå - virkelig ligner på # blogger-tpl i index.html. Den eneste forskjellen er at vi lager et bord denne gangen:
På samme måte lager du en BlogsAdminView i admin.js. Hvis du ikke er kjent med disse, anbefaler jeg deg å sjekke mine tidligere innlegg.
Accentsconagua
var Blogs = Parse.Collection.extend (modell: Blog), BlogsAdminView = Parse.View.extend (mal: Handlebars.compile ($ ('# blogs-admin-tpl'). html ()), gjengi: funksjon () var collection = blog: this.collection.toJSON (); dette. $ el.html (this.template (samling)););For å se listen, må vi gjøre det. La oss bare legge det til render () fungere i WelcomeView for nå:
gjengi: funksjon () var attributes = this.model.toJSON (); . Dette $ el.html (this.template (attributter)); var blogs = nye blogger (); blogs.fetch (suksess: funksjon (blogger) var blogsAdminView = ny BlogsAdminView (samling: blogger); bloggerAdminView.render (); $ ('maincontainer') .append (bloggerAdminView.el);, feil: funksjon (blogger, feil) console.log (error);); Sjekk administrasjonssiden, og du vil se en listevisning under Legg til en ny blogg knapp.
Hvis du følger med, håper jeg at du nå føler deg komfortabel med å skrive til og lese fra databasen. Du bør også finne det enkelt å opprette og gjengi visninger for å presentere dataene du får. Du kan imidlertid begynne å føle at det kan være for mange View.render () Fungerer her og der, og de kan gjøre koden vanskelig å lese og vedlikeholde. Du kan også føle seg dårlig å se admin.html i nettadressen.
Tenk på redigeringsfunksjonen vi skal bygge, vi kan sikkert bygge den ved å legge til hendelser og passere i bloggen vi vil redigere som et objekt, og deretter gjøre det. Men ville det ikke vært bra hvis vi kan ha noe som http://AnExampleDomain.net/edit/id? Ideen om en ruter skal hjelpe oss med å oppnå det. Det er en måte å kartlegge funksjoner til webadresser.
For å hjelpe deg med å lære dette konseptet, hvorfor går vi ikke bare videre og starter en ny ruter i admin.js:
var BlogRouter = Parse.Router.extend (// Her kan du definere noen delte variabler initialisere: funksjon (alternativer) this.blogs = nye blogger ();, // Dette kjører når vi starter ruteren. Bare la den være for nå. start: funksjon () Parse.history.start (pushState: true);, // Her er du kartfunksjoner til url. // Bare legg til 'URL pattern': ' admin: 'admin', 'login': 'logg inn', 'legg til': 'add', 'edit /: url': 'edit', admin: function , logg inn: funksjon () , legg til: funksjon () , rediger: funksjon (url) ), blogRouter = new BlogRouter (); blogRouter.start ();
Som du kan se, er det enkelt å kartlegge nettadressemønstre til funksjoner i en ruter og starte den. Nå hvis en bruker besøker / admin, det vil utløse admin () funksjon.
Legg merke til at du selv kan ta inn parametere i nettadresser ved å legge til et kolon før et variabelt navn, for eksempel redigere /: url i koden ovenfor.
La oss nå ta noen skritt for å omorganisere vår eksisterende kode til ruteren.
Den enkleste man bør være /Logg Inn side. Bare flytt gjengivelsen koden inn i Logg Inn() funksjon:
logg inn: funksjon () var loginView = new LoginView (); loginView.render (); $ ( 'Hoved-beholder.') Html (loginView.el.);
Deretter la oss skrive en funksjon for / admin side. Tidligere, da brukerne besøkte /admin.html, Vi sendte dem til innloggingsskjermen som standard. Og hvis de logget inn, sendte vi dem til velkomstskjermbildet. Gjenopprettingsfunksjonen for welcomeView var i suksess tilbakeringing. Det er ikke den beste måten å organisere koden på, og det er ikke praktisk for brukeren din.
Så nå, la oss bare gjøre en sjekk på / admin side. Hvis de er logget inn, viser vi dem velkomstsiden, og hvis de ikke er, omdirigerer vi dem til /Logg Inn.
admin: function () // Dette er hvordan du kan nåværende bruker i Parse var currentUser = Parse.User.current (); hvis (! currentUser) // Dette er hvordan du kan gjøre URL-omdirigering i JS blogRouter.navigate ('login', trigger: true); else var welcomeView = new WelcomeView (modell: currentUser); welcomeView.render (); $ ( 'Hoved-beholder.') Html (welcomeView.el.); // Vi bytter det til this.blogs, så det lagrer innholdet for andre visninger // Husk å definere det i BlogRouter.initialize () this.blogs.fetch (suksess: funksjon (blogger) var blogsAdminView = new BlogsAdminView ( samling: blogger); bloggerAdminView.render (); $ ('hovedcontainer') .append (blogsAdminView.el);, feil: funksjon (blogger, feil) console.log (error);) ; Som du kan se i koden, bruker vi blogRouter.navigate () funksjon for å omdirigere dem til /Logg Inn side. Likeledes, la oss endre gjengivelsesfunksjonen i /Logg Inn se på en blogRouter.navigate () fungere også:
Parse.User.logIn (brukernavn, passord, // Hvis brukernavnet og passordet samsvarer med suksess: funksjon (bruker) blogRouter.navigate ('admin', trigger: true);, // Hvis det er en feil feil: funksjon (bruker, feil) console.log (feil);); Husk å ta ut de gamle gjengivelsesfunksjonene i forrige kode.
La oss gi de to funksjonene et forsøk. Test og ... ingenting! Det er fordi vi må henvise til / admin på start; admin.html i seg selv stemmer ikke overens med et nettadressemønster vi angir i ruteren.
La oss legge til en standard navigere til start() fungere slik at når ruteren starter, tar den automatisk brukeren til / admin side:
start: funksjon () Parse.history.start (pushState: true); this.navigate ('admin', trigger: true); Nå, hvis du gir den en prøve, bør alt fungere riktig:
Legg merke til at du fortsatt ikke kan besøke direkte / admin eller /Logg Inn ennå. Og hvis du setter prosjektet ditt under en katalog, vil du sannsynligvis legge merke til at nettadressen din vil omdirigere fra http: //localhost/directory/admin.html til http: // localhost / admin, og det virker rart. Vi vil dekke og løse disse problemene i fremtidige økter. I dag er hovedmålet vårt å forstå hvordan ruteren fungerer når den kommer i gang, og legger grunnlag.
Fortsett, det er på tide å flytte gjengivelsen av siden «Legg til en ny blogg» fra WelcomeView til ruteren.
BlogRouter = Parse.Router.extend (... legg til: funksjon () var addBlogView = ny AddBlogView (); addBlogView.render (); $ ('. Main-container'). Html (addBlogView.el);, ... )Vi kan også omskrive hendelsen i WelcomeView å bare utløse en navigasjon:
WelcomeView = Parse.View.extend (mal: Handlebars.compile ($ ('# welcome-tpl'). Html ()), hendelser: 'klikk .add-blog': 'add', legg til: funksjon ) blogRouter.navigate ('add', trigger: true);, gjengi: funksjon () var attributes = this.model.toJSON (); dette. $ el.html (dette.template (attributter)) ;)Sjekk nå og sørg for at alt fungerer.
I denne sesjonen har vi laget en annen listevisning av blogger i administrasjonspanelet, og du har lært om det viktige konseptet med en ruter. Jeg håper nå, det føles naturlig at du oppretter og gir visninger med Parse.js. Og du har begynt å se hvordan en ruter kan hjelpe oss med å organisere og gjenbruke koden vår.
Vi gravd ikke inn i detaljene til ruterenes mekanikk, som å forstå hvorfor vi må ha trigger: true. Som jeg tidligere nevnte, er formålet med denne opplæringen å vise deg hvordan du kan få ting til å fungere. Men hvis du er interessert i å lære mer, må du sjekke ut dokumentasjonen. Vi vil også dekke mer ruterkunnskap når vi trenger det senere i serien.
I neste sesjon skal vi lage en /redigere side, og sett ruteren til riktig bruk. Jeg håper du er spent på å spikere det. Vi vil snart trekke alt sammen, så hold deg innstilt!
