Începeți să construiți blogul dvs. cu Parse.js Categorii

Ce veți crea

Mai întâi de toate, bine ați venit la finalul acestei serii de tutorial!

Ultima sesiune, i-am arătat cum să adăugați o nouă funcție blogului: adăugarea de comentarii. Este destul de mult o caracteristică autonomă. În această sesiune, vă voi arăta cum să adăugați categorii în sistemul dvs. de blog. Este o sarcină mai dificilă, deoarece codul său va fi mai strâns legat de codul existent.

Modelul categoriei

Pasul 1: Clasa de categorii

Știți exercițiul: modelul vine mereu primul. Încă o clasă nouă pe Parse.com: Categorie clasă. Ar trebui să fie foarte simplu. Avem nevoie doar de un câmp personalizat:

Şir Nume

Să creați doar două categorii inactive pentru a face mai ușoară testarea:

Pasul 2: Câmpul categoriei în tabelul Clasa blogului

Acum, adăugați o nouă coloană în tabela de clasă Blog de pe Parse.com și faceți-i un pointer Categorie.

Să le legăm, de asemenea, de mai multe postări pe blog.

Pasul 3: Obiectul de comentariu

Apoi, cometariu obiect în blog.js. Din nou, poate fi foarte simplu.

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

Pasul 4: Colecția de comentarii

Și colecția:

Categorii = Parse.Collection.extend (model: Categorie)

Adăugați o scurgere de categorie în formularul Scrieți un blog

Pasul 1: Încărcați categorii

Ca în comentariile, să primim comentarii când le oferim WriteBlogView.

render: function () ... var self = aceasta, categorii = noi Categorii (); categoria.fetch (), atunci (funcția (categorii) attributes.categories = categories.toJSON () ;. $ el.html (this.template (atribute)). ););

Pasul 2: Găsiți categoria curentă

Apoi, trebuie să găsim categoria curentă atunci când există o categorie existentă pentru postarea pe blog pe care o editați. Putem purta doar prin attribute.categories matrice și set selectat la ADEVĂRAT pentru categoria corectă.

categories.fetch (), atunci (funcția (categorii) attributes.categories = categories.toJSON (); // Descărcați categoria curentă dacă (attributes.category) attributes.categories.forEach (funcția (categoria, i) (categoria == attributes.category) attributes.categories [i] .selected = true;); console.log (atributele) ;. $ el.html (self.template (atribute) .write-content '); wysihtml5 (););

Pasul 3: Render Categories într-un meniu derulant

Și în HTML, render categorii într-un #categorii pentru fiecare categorie /fiecare

  Pasul 4: Înregistrați categoria selectată
 Acum, să o înregistrăm în a depune() funcția în WriteBlogView:
 trimiteți: funcția (e) ... this.model.update (title: data [0] .value, category: data [1] .value, summary: data [2] .value, content: data [3] );  
 Și apoi în Blog.update () funcţie:
 Blog = Parse.Object.extend ('Blog', update: function (data) ... var categoria = noua Categorie (); category.id = data.category; this.set ( "categorie": categorie, ...) salvați (null, ...);) 
 Observați că nu puteți pune doar id-ul categoriei, dar trebuie să creați un nou categorie exemplu, și setați id-ul său la ID-ul de categorie pe care îl obțineți din formular.
 Dați-i un test și, sperăm, îl puteți vedea corect înregistrat în baza de date:
    Categorii Pagini
 Acum, hai să mergem mai departe pentru a crea o bară laterală care face legătura cu diferite categorii.
 Pasul 1: Curățați și creați un șablon
 Mai întâi, scoateți tot codul HTML static pentru bara laterală:
 
 
 Și apoi faceți un nou șablon div pentru șablonul din meniul de categorii:
  
 Pasul 2: CategoriesView
 Apoi, faceți o Vizualizare pentru această listă de categorii:
 CategoriiView = Parse.View.extend (template: Handlebars.compile ($ ('# categories -tpl'). Html ()), render: function () var collection = category: this.collection.toJSON ; $ el.html (acest.template (colecție));) 
 Pasul 3: Render CategoriesView
 Deoarece lista de categorii se află pe fiecare pagină, putem crea o variabilă comună în BlogRouter.initialize ():
 inițializa: funcția (opțiuni) this.blogs = noi Bloguri (); this.categories = Categorii noi ();  
 Și apoi redați-o în .start() funcţie:
 start (): function () ... this.categories.fetch (), apoi (functie (categorii) var categoriesView = new CategoriesView (colectie: categories); .html (categoriesView.el););  
 Faceți o încercare, iar acum se face:
    Pentru că acum avem o variabilă comună, o putem utiliza și ea WriteBlogView.render ():
 Pasul 4: Adăugați routerul
 Acum trebuie doar să facem / Categorie / objectId muncă.
 Să adăugăm mai întâi acest model de router:
 rute: ... 'categoria /: id': 'categoria' 
 Apoi scrieți categorie funcţie. Este destul de simplă, doar o combinație între lucrurile pe care le-ați învățat până acum:
 categorie: funcție (id) // Obținerea obiectului din categoria curentă var query = new Parse.Query (Category); query.get (id, success: function (categorie) // Interogare pentru a obtine blogurile sub acea categorie var blogQuery = nou Parse.Query (Blog) .equalTo ("categorie" (blogs) // Render blogs var blogsView = blogsView noi collection: blogs); blogsView.render (); $ container.html (blogsView.el);); eroare: funcție (categorie, eroare) console.log (eroare););  
 Acum totul funcționează.
    Concluzie
 Wow, nu-mi vine să cred că mi-a luat atât de mult pentru a termina întreaga serie. În ultimele zece sesiuni, ați învățat multe despre Parse.js și dezvoltarea web în general. Împreună am construit un sistem blog cu funcții complete: adăugați, editați, ștergeți, conectați, comentați și, în această sesiune, categoriile.
 Sper că veți găsi această serie utilă. Vă rugăm să împărtășiți cu dvs. feedback-ul, sugestiile și conținutul pe care doriți să-l acoperiți în viitor. Și dacă ați realizat proiecte web utilizând tehnici din acest tutorial, mi-ar plăcea să le văd și eu.



		
			
	   
	




Cod