Accentsconagua

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

Cod
Share
Ce veți crea

Această serie de tutori se apropie de final. Dacă ați urmat până acum, sperăm că aveți o înțelegere solidă a cadrului MVC și cum funcționează Parse.js. Ultima sesiune, am implementat vizualizarea de ștergere, deconectare și un singur blog. Și în această sesiune vom adăuga zona de comentare la vizualizarea unei singure pagini.

Secțiunea de comentarii va avea două părți: un formular de comentarii în partea de sus și o listă de comentarii la acel post blog din partea de jos:

Pentru că acum ați construit atât de multe caracteristici, voi accelera un pic și voi grupa conținutul în trei pași mari:

  1. Creați modelul de comentariu.
  2. Actualizați BlogView
  3. Adăugați formularul de comentarii.

1. Creați modelul Comentariu

Pasul 1: Clasa de comentarii

Modelul vine întotdeauna primul. Să mergem mai departe și să creăm o nouă clasă pe Parse.com.

Această clasă nouă de comentarii ar trebui să aibă următoarele domenii:

  • ac indicator blogul
  • Şir numele autorului
  • Şir e-mail
  • Şir conţinut

Indicatorul indică înapoi la postul de blog din care aparține, iar celelalte trei câmpuri stochează informații cheie pentru acel comentariu. De dragul acestui tutorial, nu voi avea utilizatorul să vă înscrieți și să vă conectați aici, dar puteți citi documentația Parse.js din clasa User pentru mai multe detalii.

Pasul 2: Obiectul de comentariu

Apoi, să creați cometariu în modelul nostru blog.js fişier. Veți observa că este foarte asemănător cu Blog modelul pe care l-am creat. Singura diferență este că nu le permitem utilizatorilor să își editeze comentariile mai târziu, deci folosim un .adăuga() funcție în loc de .Actualizați() funcţie. Din nou, nu ezitați să îl modificați dacă doriți.

Comentariu = Parse.Object.extend ('Comentariu', )

2. Actualizați BlogView

Mergeți la vizualizare, deoarece avem această secțiune de comentarii BlogView, putem face comentariul în BlogView de asemenea. Vom pune doar asta în .face() funcţie.

Pasul 1: Fetch Comentarii

În primul rând trebuie să preluăm comentariile din blogul curent:

render: function () var self = aceasta, attributes = this.model.toJSON (), // O interogare nouă pentru a filtra tot comentariul din acest blog query = new Parse.Query (Comment) .equalTo ("blog" , this.model) .descend ('createdAt'), // Creați o bază de colectare pe noua colecție query = query.collection (); // Returnați colecția collection.fetch (), apoi (funcția (comments) // Stocați comentariile ca obiect JSON și adăugați-le în atributele object attributes.comment = comments.toJSON (); auto.template (atribute)););

Observați că vom adăuga .descendent ( 'createdAt') la interogare, astfel încât să afișăm întotdeauna cel mai recent comentariu în partea de sus.

Daca ne logam atribute chiar înainte de ao face, putem vedea că obiectul ar fi structurat astfel:

ACL: Obiect, autor: Obiect, autorName: "moyi", comentariu: Array [2], ... __proto__: Object

Și puteți vedea că comentariile sunt stocate ca o matrice și sunt pregătite pentru a fi redate.

Pasul 2: Afișați comentariile

Acum avem comentarii trimise în șablonul nostru HTML atribut, acum putem trece prin matricea cu sintaxa handlebar.js:

 #if comentariu 
Comentarii
 
     #unui comentariu 
  •  
    autorName a spus:
     
    conţinut
     
    •  /fiecare 
 /dacă

Dacă doriți să faceți mai întâi un test, faceți câteva comentarii false despre Parse.com în baza dvs. de date și actualizați această pagină:

3. Adăugați formularul de comentarii

Apoi, putem trece la adăugarea formularului de comentarii.

Pasul 1: Adăugați cod HTML

Adăugați această structură HTML chiar deasupra secțiunii pentru comentarii:

 
Lasa un comentariu

Pasul 2: Adăugați un eveniment pentru trimiterea formularului

Acum, să adăugăm un eveniment în BlogView:

evenimente: 'submit .form-comment': 'submit'

Pasul 3: Construiți funcția submit ()

Și apoi construiți a depune() funcţie. Dacă încă mai ții minte cum am scris funcția de trimitere pentru WriteBlogView, acest lucru este destul de similar.

Trebuie doar să observăm de data asta că trebuie să intrăm acest model la fel de blogul pentru noul comentariu:

trimiteți: funcția (e) e.preventDefault (); var data = $ (e.target) .serializeArray (), comentariu = nou Comentariu (); comment.add (blog: acest model, autorName: data [0] .value, email: data [1] .value, content: data [2] .value);

Dați-i un test și, cu siguranță, noul comentariu se afișează acum în partea de sus:

Concluzie

În această sesiune, ați construit funcția de comentariu în trei pași rapizi. Sperăm că este ușor pentru dvs. acum, și puteți scrie majoritatea pașilor de unul singur.

Următoarea sesiune, vă voi arăta o ultimă caracteristică: adăugarea de categorii în blog. După asta, vă voi lăsa acolo, ca dezvoltatori capabili de Parse.js. Stay tuned și lasă-mă toate întrebările și feedback-ul pe care-l aveți.

Cod
×