Kom deg i gang med å bygge bloggen din med Parse.js Slett, Logg ut og Enkelt bloggvisning

Hva du skal skape

I den siste sesjonen refactored du hele bloggensystemet. Nå som alt er ryddet opp, er du klar til å få fart på noen nye opplevelser. I denne sesjonen skal vi gjøre mer rundt ruteren, og legge til tre funksjoner i vårt bloggsystem: Slett, logg ut og enkelt bloggvisning.

1. Slett

I del 6 dekket vi redigeringsfunksjonen. Sjansen er, du vil også slette et av dine blogginnlegg. Det er to steder du kan sette denne funksjonen til: Legg den i BlogsAdminView, eller send det til en nettadresse og ta kontakt med det i Router.

Jeg vil vise deg ruteren. Det er mer vanlig, og det gjør koden bedre strukturert.

Trinn 1: Legg til URL-mønster

La oss som vanlig legge til et nettadressemønster først:

 ruter: ": 'index', 'admin': 'admin', 'logg inn': 'logg inn', 'legg til': 'legg til', 'rediger /: id': 'rediger', 'del / : 'del'

Trinn 2: Koble til Slett

Oppdater deretter linken på admin siden:

 Slett

Trinn 3: del Funksjon

La oss legge til en ny del Fungerer til ruteren for å håndtere den. Det er ganske greit: finn blogginnlegget ved hjelp av id Vi passerte inn fra nettadressen, og ødelegger den.

Prøv å utfordre deg selv og skriv det uten å lese koden min. Du bør få en veldig god forståelse av Parse.js på dette punktet.

 del: funksjon (id) var query = new Parse.Query (Blog); query.get (id) .then (funksjon (blogg) blog.destroy (). da (funksjon (blogg) alert ('Slettet!');));

Legg merke til at du kan bruke .deretter() fungere her i stedet for å sende et objekt som vi gjorde tidligere:

 query.get (id, suksess: funksjon (blogg) ..., feil: funksjon (blogg, feil) ...);

Det er en enkel måte å legge til tilbakeringingsfunksjoner i Parse.js, noe som gjør koden renere og mer lesbar. Gå til Parse.com for å se full dokumentasjon på løfter.

La oss gi det en testkjøring, og dobbeltkjekke databasen for å se om den fungerer.

Gratulerer, det fungerer!

Trinn 4: Omdirigere Tilbake til administratorsiden

Hvis du tar hensyn til nettadressen, ser du at etter at du har klikket ut av varselboksen, er nettadressen fortsatt / Del / og innlegget du bare slettet er fortsatt der. Vi vil sende brukere tilbake til administrasjonssiden etter sletting, og siden skal oppdateres og gjenspeile endringen de nettopp har gjort.

Du kan oppnå alt dette ved å gjøre en omdirigering:

 del: funksjon (id) var selv = dette, spørring = ny Parse.Query (Blog); query.get (id) .then (funksjon (blogg) blog.destroy (). deretter (funksjon (blogg) self.navigate ('admin', trigger: true);));

Legg merke til at fordi denne gangen du ringer navigere Fra ruteren kan du bare lagre ruteren som selv-, og ring self.navigate ().

Trinn 5: Sjekk innlogging

Til slutt må vi sørge for at du er den eneste som kan slette blogginnleggene dine. La oss sjekke innlogging for funksjonen. Dette burde være det samme som redigere funksjon.

 del: funksjon (id) hvis (! Parse.User.current ()) this.navigate ('# / login', trigger: true);  annet ...

2. Logg ut

Som å slette, kan logout også håndteres av ruteren. Og det starter også med å legge til nettadressemønsteret:

 ruter: ... 'logout': 'logout',

Logout-funksjonen selv er veldig enkel i Parse.js. Bare ring Parse.User.logOut () og deretter omdirigere til /Logg Inn side:

 logout: funksjon () Parse.User.logOut (); this.navigate ('# / login', trigger: true);

Og til slutt la vi legge til en knapp til # Admin-tpl:

 Logg ut

Som du kan se, er styling egentlig ikke i fokus for denne opplæringen. Vær så snill å fikse polstring og stil det du vil.

3. Enkelt bloggvisning

La oss nå fortsette å gjøre noen nye funksjoner.

Frem til dette punktet viser vi hele bloggen artikkelen på hjemmesiden. Mens noen mennesker foretrekker denne stilen, støtter de fleste blogging-systemer ideen om å ha en utklippssammendrag på forhånd, og hvis de besøkende klikker inn i artiklene, kan de se innholdet på en egen side, med muligens noen kommentare rundt det.

Jeg vil gå deg gjennom å skape denne detaljert single blog view i denne sesjonen, og vi vil fokusere på å bygge kommentarer i den neste.

Trinn 1: Legg til en oppsummeringskolonne

Først legger vi til en kolonne for sammendraget i Blog-tabellen:

Trinn 2: Ta med oppsummering i WriteBlogView

La oss legge det til Blog.update () funksjon. Du kan endre funksjonen til å ta et dataobjekt som inneholder tittelen, sammendraget og innholdet for å unngå å huske rekkefølgen av variablene.

 oppdatering: funksjon (data) // Bare sett inn ACL hvis bloggen ikke har den ... this.set ('title': data.title, 'summary': data.summary, 'content': data.content, ...). Lagre (null, ...);

Legg til en mer </code> for sammendrag i <code># Write-tpl</code>:</p> <pre> // Sett denne formgruppen mellom formgruppen for tittel og innhold <div> <label for="summary">Sammendrag</label> <textarea name="summary" rows="3">sammendrag

  Og endre WriteBlogView.submit () fungere i henhold til dette:
  send inn: funksjon (e) ... this.model.update (title: data [0] .value, summary: data [1] .value, content: data [2] .value);  
 Nå, siden vi har lagt til en ny variabel i malen, må vi gi den en standard tom verdi i WriteBlogView.render () funksjon:
  gjengi: funksjon () ... hvis (this.model) ... else attributes = form_title: 'Legg til en blogg', tittel: ", sammendrag:", innhold: " ... 
 Og hvis du bruker wysihtml5 plugin for innholdet, vil du legge merke til tidligere at vi målretter mot alle </code> elementer:</p> <pre>. Dette $ el.html (this.template (attributter)) finne ( 'textarea') wysihtml5 ()..; </pre> <p>La oss gi innholdet textarea en klasse og målrett bare det med wysihtml5 plugin.</p> <p>I <code># Write-tpl</code>:</p> <pre> <textarea name="content" rows="20">innhold  
I WriteBlogView.render () funksjon:
 . Dette $ el.html (this.template (attributter)) finner wysihtml5 (). ( 'Skrive-innhold..'); 
 Nå jobber det!
    Trinn 3: Skjermoppsummering på hjemmesiden
 Spill med den nye skrivebloggsiden og legg til noen blogginnlegg med sammendrag, og trekk oppsummeringen i stedet for innholdet i # blogger-tpl:
  #each blog  tittel
 På tid av authorName
 sammendrag
 
 /Hver 
 Trinn 4: Legg til SingleBlogView-siden
 Ta et øyeblikk og tenk på hvordan ville du legge til en / Blogg /: id side for å vise innholdet for hvert blogginnlegg, og prøv å gjøre det selv. Du bør kunne gjøre alt selv selv nå!
 Men for formålet med denne opplæringen, la meg gi deg et raskt gjennomgang:
 Legg til en ny HTML-mal for denne siden:
   
 Legg til en ny BlogView klasse som tar inn en blog objekt, og gjengiv det # Blog-tpl:
  BlogView = Parse.View.extend (mal: Handlebars.compile ($ ('# blog-tpl'). Html ()), gjengi: funksjon () var attributes = this.model.toJSON (); this. $ el.html (this.template (attributter));), 
 Legg til et nytt nettadressemønster i BlogRouter:
  ruter: ... 'blogg /: id': 'blogg', ... 
 Og i BlogRouter.blog () funksjon, få en blogg med sin id, gjengi a blogView, og legg det inn $ container:
  blogg: funksjon (id) var query = new Parse.Query (Blog); query.get (id, suksess: funksjon (blogg) console.log (blogg); var blogView = ny BlogView (modell: blogg); blogView.render (); $ container.html (blogView.el); , feil: funksjon (blogg, feil) console.log (feil););  
 Endelig oppdater koblingen i # blogger-tpl å lenke til denne siden:
  #each blog  tittel
 På tid av authorName
 sammendrag
 
 /Hver 
 Gi det et forsøk:
    Ekstra poeng hvis du gjorde dette selv.
 Konklusjon
 I denne sesjonen bygget du mye: en slettingsfunksjon, en logout-funksjon og en annen ny sidetype. Hvis du har fulgt denne opplæringsserien til nå, tror jeg du har en solid forståelse av hvordan databasen, modellen, visningen, malen og ruteren fungerer sammen. Jeg håper du også begynner å bygge et Parse.js-prosjekt på dette punktet. Gi meg tilbakemeldingen din og gi meg beskjed om det er nyttig.
 Med denne enkle blogginnleggsiden bygde vi denne gangen, vi kommer til å legge til en kommentar seksjon neste gang. Skal være en morsom. Følg med!



		
			
	   
	




Kode