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

Hva du skal skape

Først av alt, velkommen til finalen av denne opplæringsserien!

Siste økt viste jeg deg hvordan du legger til en ny funksjon i bloggen: legger til kommentarer. Det er ganske mye en frittstående funksjon. Denne sesjonen, jeg vil vise deg hvordan du legger til kategorier i bloggsystemet ditt. Det er en vanskeligere oppgave, da koden blir tettere sammenflettet med den eksisterende koden.

Kategori Modell

Trinn 1: Kategori Klasse

Du kjenner boret: modellen kommer alltid først. En ny ny klasse på Parse.com: the Kategori klasse. Det burde være veldig enkelt. Vi trenger bare ett tilpasset felt:

string Navn

La oss bare lage to dummy kategorier for å gjøre det lettere for testing:

Trinn 2: Kategorifelt i Blog Class-tabellen

Nå legger du til en ny kolonne i Blog-klassetabellen på Parse.com og gjør det til en peker til Kategori.

La oss også koble dem til flere blogginnlegg.

Trinn 3: Kommentarobjekt

Deretter Kommentar objekt i blog.js. Igjen kan det være veldig enkelt.

Kategori = Parse.Object.extend ('Kategori', );

Trinn 4: Kommentarer Innsamling

Og samlingen:

Kategorier = Parse.Collection.extend (modell: Kategori)

Legg til en kategori Dropdown i skrive en blogg skjema

Trinn 1: Hent kategorier

Som i kommentarer, la vi hente kommentarer når vi gjengir WriteBlogView.

gjengi: funksjon () ... var selv = dette, kategorier = nye kategorier (); categories.fetch (). deretter (funksjon (kategorier) attributes.categories = categories.toJSON (); self. $ el.html (this.template (attributes)). finn ('. skriveinnhold'). wysihtml5 ););

Trinn 2: Finn gjeldende kategori

Deretter må vi finne den nåværende kategorien når det er en eksisterende kategori for blogginnlegget du redigerer. Vi kan bare gå gjennom attribute.categories array og sett valgt til EKTE for riktig kategori.

categories.fetch (). then (funksjon (kategorier) attributes.categories = categories.toJSON (); // Få nåværende valgt kategori hvis (attributes.category) attributes.categories.forEach (funksjon (kategori, i) hvis (kategori == attributes.category) attributes.categories [i] .selected = true;); console.log (attributter); self. $ el.html (self.template (attributes)). .write-innhold '). wysihtml5 (););

Trinn 3: Ranger kategorier i en dropdown-meny

Og i HTML, gjengi kategorier i en #each kategorier /Hver

  Trinn 4: Ta opp den valgte kategorien
 La oss nå registrere det i sende inn() fungere i WriteBlogView:
 send inn: funksjon (e) ... this.model.update (title: data [0] .value, category: data [1] .value, summary: data [2] .value, content: data [3] .value );  
 Og så i Blog.update () funksjon:
 Blog = Parse.Object.extend ('Blog', update: function (data) ... var kategori = ny kategori (); category.id = data.category; this.set ('title': data.title, 'kategori': kategori, ...). lagre (null, ...);) 
 Legg merke til at du ikke bare kan legge ned kategoridokumentet, men du må opprette en ny kategori eksempel, og angi id til kategori id du får fra skjemaet.
 Gi det en test, og forhåpentligvis kan du se det riktig registrert i databasen:
    Kategori Sider
 La oss nå gå videre for å lage et sidebar som lenker til forskjellige kategorier.
 Trinn 1: Ryd opp og lag en mal
 Først tar du ut all den statiske HTML-koden for sidefeltet:
 
 
 Og så lag en ny mal div for malen på kategori menyen:
  
 Trinn 2: CategoriesView
 Deretter gjør du en visning for denne listen over kategorier:
 CategoriesView = Parse.View.extend (mal: Handlebars.compile ($ ('# categories-tpl'). Html ()), gjengi: funksjon () var collection = kategori: this.collection.toJSON () ; dette. $ el.html (this.template (samling));) 
 Trinn 3: Render CategoriesView
 Fordi listen over kategorier er på hver side, kan vi opprette en delt variabel i BlogRouter.initialize ():
 initialiser: funksjon (alternativer) this.blogs = nye blogger (); this.categories = nye kategorier ();  
 Og så gjeng det i .start() funksjon:
 start: funksjon () ... this.categories.fetch (). da (funksjon (kategorier) var categoriesView = new CategoriesView (samling: kategorier); kategorierView.render (); $ ('blog-sidebar') .html (categoriesView.el););  
 Gi det en prøve, og nå gjør det:
    Fordi vi nå har en delt variabel, kan vi også bruke den i WriteBlogView.render ():
 Trinn 4: Legg til ruteren
 Nå må vi bare gjøre / Kategori / objectId arbeid.
 La oss legge til dette rutermønsteret først:
 ruter: ... 'kategori /: id': 'kategori' 
 Deretter skriver du kategori funksjon. Det er ganske greit, bare en kombinasjon av tingene du har lært så langt:
 kategori: funksjon (id) // Hent nåværende kategoriobjekt var spørring = ny Parse.Query (Kategori); query.get (id, suksess: funksjon (kategori) // Query for å få bloggene under den kategorien var blogQuery = new Parse.Query (Blog) .equalTo ("kategori", kategori) .descending ('createdAt') ; collection = blogQuery.collection (); // Hent blogger collection.fetch (). deretter (funksjon (blogger) // Render blogger var blogsView = new BlogsView (samling: blogger); blogsView.render (); $ container.html (blogsView.el););, feil: funksjon (kategori, feil) console.log (feil););  
 Nå jobber alt.
    Konklusjon
 Wow, jeg kan ikke tro det tok meg så lang tid å fullføre hele serien. I løpet av de siste ti øktene har du lært mye om Parse.js og webutvikling generelt. Sammen har vi bygget et bloggsystem med fulle funksjoner: legg til, rediger, slett, logg inn, kommentarer, og i denne økten, kategorier.
 Jeg håper du finner denne serien nyttig. Vennligst del med meg din tilbakemelding, forslag og innhold du vil at jeg skal dekke i fremtiden. Og hvis du gjorde noen webprosjekter ved hjelp av teknikker fra denne opplæringen, vil jeg gjerne se dem også.



		
			
	   
	




Kode