Kom i gang med å bygge bloggen din med Parse.js Rediger

Hva du skal skape

I vår siste sesong bygget vi en visning for å administrere eksisterende blogginnlegg, og vi gikk gjennom ideen om en ruteren. Nå er det på tide å bygge ut redigeringsfunksjonen.

1. Opprett og rediger EditBlogView

For å bygge en redigeringsfunksjon, la oss først lage en EditBlogView. Igjen, dette burde være veldig enkelt for deg nå. Vi har gått langt sammen.

Trinn 1: HTML-mal

Denne delen er veldig lik den AddBlogView mal. Den eneste virkelige forskjellen er at fordi vi redigerer en blogg, må vi passere i eksisterende tittel og innhold.

Trinn 2: EditBlogView

Og så EditBlogView. Igjen, dette ligner veldig AddBlogView. I denne veiledningen fokuserer vi på hvordan du får det til å fungere først. I neste sesjon vil vi gjøre alt rydde opp arbeidet, og fjerne duplisert kode. Bær med meg for nå.

EditBlogView = Parse.View.extend (mal: Handlebars.compile ($ ('# edit-tpl'). Html ()), hendelser: 'send .form-edit': 'send', send: funksjon e) e.preventDefault (); // Vi vil skrive innleveringsfunksjonen senere, gjengi: funksjon () var attributes = this.model.toJSON (); this. $ el.html (this.template (attributter) );)

Denne gangen kommer vi ikke til å først sjekke og sørge for at denne delen av koden fungerer - ideelt sett har du gjort det nok til at du skal føle deg komfortabel med å gå videre. Sjekk alltid de forrige øktene, eller la meg få en kommentar hvis du føler deg fast.

2. Link til / redigere siden med ruteren

La oss nå sørge for det /redigere/ vil lenke til og gjøre den riktige redigeringsvisningen.

Trinn 1: / rediger /: id

Siste gang har vi allerede gjort en del av forberedelsene. Vi har nettadressemønsteret for /redigere side i BlogRouter.routes:

ruter: 'admin': 'admin', 'login': 'logg inn', 'legg til': 'add', 'edit /: url': 'edit'

Som du kan se, peker URL-mønsteret allerede på BlogRouter.edit () funksjon, der vi har en liten plassholderfunksjon som tar inn url-parameterinngangen:

rediger: funksjon (url) 

Dette betyr at hvis du besøker http: // localhost / your-directory / edit / what-ever-you-put-her, BlogRouter.edit () funksjonen vil bli utløst, og variabelen url innen den funksjonen vil verdien av hva noensinne-du-put-her.

Så nå, hva er den enkleste tingen å sette etter /redigere som kan hjelpe oss med å finne det eksakte blogginnlegget som vi vil redigere? Det bør være id, Ikke sant? La oss endre koden litt, så det er klart at vi skal sette id der.

ruter: 'admin': 'admin', 'login': 'logg inn', 'legg til': 'legg til', 'rediger /: id': 'rediger', ... rediger: funksjon

Trinn 2: Få en blogg med dens ID

Nå som vi har fått id fra nettadressen, må vi finne den aktuelle bloggen med dette id. Måten å gjøre det i Parse.js bruker et spørsmål:

rediger: funksjon (id) // Først må du definere en ny spørring og fortelle hvilken tabell skal det gå for var query = new Parse.Query (Blog); // Hvis du leter etter objekt ved deres id, // bare pass IDet som den første parameteren i .get () funksjon query.get (id, suksess: funksjon (blogg) // Hvis bloggen ble hentet ., feil: funksjon (blogg, feil) // Hvis bloggen ikke ble hentet vellykket.); 

Hvis du vil vite mer om Parse-spørringer, sjekk dokumentasjonen deres.

Trinn 3: Gjenta editBlogView

La oss fortsette å fullføre suksess og feil Fungerer i tilbakekallingen av spørringen.

For suksess funksjon, vi vil gjengi en editBlogView bruker bloggen som modell:

suksess: funksjon (blogg) var editBlogView = ny EditBlogView (modell: blogg); editBlogView.render (); $ ( 'Hoved-beholder.') Html (editBlogView.el.); 

Og for feil funksjon, la oss bare logge feilen som vanlig:

feil: funksjon (blogg, feil) console.log (feil); 

Trinn 4: Lenk til / rediger side

Vi fortsetter å redigere koblingene i # Blogger-admin-tpl så de kobler faktisk til /redigere sider. La oss også gi den en unik klasse fordi vi skal referere til det:

Rediger |

Og for å sikre at ruteren får URL-endringen (fordi den ikke er statisk ennå), la oss skrive vår egen lenkefunksjon for å erstatte standardinnstillingen i BlogAdminView.

Først legger du til en hendelse for å klikke .app-redigering. Derfor trengte vi en klasse før!

hendelser: 'klikk .app-rediger': 'rediger'

Så innenfor redigere() funksjonen, forhindrer standardhandling, få href-verdien, og bruk blogRouter.navigate () å utløse det.

rediger: funksjon (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter.navigate (href, trigger: true); 

Nå kan vi teste det ut:

Testingen kan være litt vanskelig på dette tidspunktet fordi ruteren ikke er fullt opprettet ennå. Bare gå til http: //localhost/your-directory/admin.html som utgangspunkt når du oppdaterer. Vi vil ta vare på dette i neste sesjon.

3. Send inn bloggredigering

Vi er så nær å få denne siden til å fungere. Vi trenger bare å lage EditBlogView.submit () funksjon arbeid.

Trinn 1: Blog.update () 

Akkurat som vi opprettet Blog.create () funksjon for å legge til en ny blogg, nå må vi opprette en Blog.update () funksjon for å lagre våre endringer.

oppdatering: funksjon (tittel, innhold) this.set ('title': title, 'content': innhold). lagre (null, suksess: funksjon ('title') + 'har blitt lagret!');, feil: funksjon (blogg, feil) console.log (blogg); console.log (error);); 

Som du kan se, er det veldig lik den .skape() funksjon, men i stedet for å opprette og lagre en ny blogg, setter du verdien på det nåværende objektet først, og lagrer det deretter.

Trinn 2: EditBlogView.submit ()

La oss få dataene fra skjemaet i EditBlogView og ring til .sende inn() Funksjon på modellen (som refererer til gjeldende bloggpost gjengitt i redigeringsvisningen). Igjen, veldig lik den i AddBlogView:

send inn: funksjon (e) e.preventDefault (); var data = $ (e.target) .serializeArray (); this.model.update (data [0] .value, $ ('textarea') .val ()); 

Prøv det, og det skal fungere!

Hvis du har fulgt opplæringen til dette punktet, bra gjort faktisk.

4. Bonus: Lesbar URL

Hvis du ikke liker å se id i url, og vil ha det som / Redigere / your-blog-tittel /, du kan også gjøre det ganske enkelt også.

Bare legg til et nytt felt url til blogginnleggene dine, og legg til det i .skape() funksjon:

'url': title.toLowerCase () .replace (/ [^ \ w] + / g, ") .replace (/ + / g, '-')

Og i BlogRouter.edit (), spørre blogginnlegg av deres url verdi:

query.equalTo ("url", url) .find (). deretter (funksjon (blogger) // Denne spørringen vil returnere alle kvalifiserende blogger i en matrise // Så bare få den første // Hvis du vil lære mer, sjekk ut Parse.js doc var blog = blogger [0]; ...);

Jeg vil ikke gi all koden her, fordi jeg tror du kan stykke den sammen nå!

Konklusjon

Nå skal alt komme sammen for deg. Du har gjort massevis av fremskritt så langt. I denne sesjonen opprettet vi hele redigeringsfunksjonen for bloggen: fra å forberede siden, til å sette opp ruteren, og deretter til å oppdatere databasen.

Neste gang vil vi gjøre en stor opprydding i vår kodebase. Nå har vi mye overlappende kode her og der, fordi vi bare vil sørge for at vi kan bygge funksjonene til jobb. Neste gang vil du slå sammen index.html og admin.html, .skape() og .Oppdater(), AddBlogView og EditBlogView. Du vil også lære å bygge en solid applikasjonsstruktur med Parse.js. 

Hva annet? Vi vil også se ruteren, slik at nettadressene kan være statiske (som betyr at du kan bokmerke det, oppdatere siden, eller sende den til vennen din). Masse gode ting å komme, så hold deg innstilt!