Începeți să construiți blogul dvs. cu Parse.js Ștergeți, deconectați și vizualizați un singur blog

Ce veți crea

În ultima sesiune, ați refacturat întregul dvs. sistem de bloguri. Acum, că totul este curățat, sunteți pregătit să accelerați pentru unele noi aventuri. În această sesiune, vom face mai mult în jurul routerului și vom adăuga alte trei funcții în sistemul nostru de blog: ștergeți, deconectați și vizualizați un singur blog.

1. Ștergeți

În partea 6, am acoperit funcția de editare. Sunt șanse, ați dori, de asemenea, să ștergeți una dintre postările de pe blog. Există două locuri pe care le puteți pune această funcție: adăugați-o în BlogsAdminView, sau să o trimiteți la o adresă URL și să o rezolvați în Router.

Vă voi arăta calea Routerului. Este mai frecvent folosită și face codul mai bine structurat.

Pasul 1: Adăugați modelul de adresă URL

Ca de obicei, să adăugăm mai întâi un model de adresă URL:

 rute:: "", "admin", "login": "login" : 'del' 

Pasul 2: Legătura cu Ștergeți

Apoi, actualizați link-ul din pagina admin:

 Șterge 

Pasul 3: Funcția del

Acum, să adăugăm un nou del funcția router-ului să o gestioneze. Este destul de simplu: găsiți postarea pe blog folosind id am trecut de la adresa URL și l-am distrus.

Încercați să vă provocați și să o scrieți fără să citiți codul meu. Ar trebui să înțelegi foarte bine Parse.js în acest moment.

 del: funcția (id) var query = Parse.Query nou (Blog); query.get (id) .then (funcția (blog) blog.destroy (), apoi (funcția (blog) alert ('Șterse!');  

Observați că puteți utiliza funcția .atunci() funcționați aici în loc să treceți un obiect așa cum am făcut-o anterior:

 query.get (id, succes: function (blog) ..., eroare: functie (blog, eroare) ...); 

Este o modalitate ușoară de a adăuga funcții de apel în Parse.js, făcând codul dvs. mai curat și mai ușor de citit. Du-te la Parse.com pentru a vedea documentația completă cu privire la promisiuni.

Să facem o încercare și să verificăm din nou baza de date pentru a vedea dacă funcționează.

Felicitări, funcționează!

Pasul 4: redirecționați înapoi la pagina de administrare

Dacă acordați atenție URL-ului, veți vedea că după ce faceți clic pe fereastra de alertă, URL-ul este încă în continuare / Del / iar postul pe care tocmai l-ați șters este încă acolo. Vrem să trimitem utilizatorilor înapoi la pagina de administrare după ștergere, iar pagina ar trebui să se actualizeze și să reflecte schimbarea pe care au făcut-o.

Puteți realiza toate acestea făcând o redirecționare:

 del: funcție (id) var self = aceasta, interogare = Parse.Query nou (Blog); query.get (id) .then (funcția (blog) blog.destroy (). atunci (funcția (blog) self.navigate ('admin', trigger: true);  

Observați că, de data aceasta, sunați navigare din interiorul routerului, puteți stoca router-ul ca de sine, și sunați self.navigate ().

Pasul 5: Verificați conectarea

În cele din urmă, trebuie să vă asigurați că sunteți singurul care poate șterge postările de pe blog. Să verificăm datele de conectare pentru funcție. Aceasta ar trebui să fie aceeași ca și Editați | × funcţie.

 del: funcția (id) if (! Parse.User.current ()) this.navigate ('# / login', declanșator: true);  altceva ... 

2. Deconectați-vă

Ca și ștergerea, logout-ul poate fi de asemenea gestionat de către router. De asemenea, începe cu adăugarea modelului de adresă URL:

 rute: ... 'logout': 'logout', 

Funcția de logout în sine este foarte ușor în Parse.js. Doar sună Parse.User.logOut () și apoi redirecționați către /Logare pagină:

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

Și, în sfârșit, să adăugăm un buton # Admin-TPL:

 Deconectare 

După cum puteți vedea, stilul nu este cu adevărat în centrul acestui tutorial. Simțiți-vă liber să fixați umplutura și stilul, totuși doriți.

3. Vizualizarea unui singur blog

Acum să mergem mai departe pentru a face noi funcționalități.

Până în acest moment, afișăm întregul articol de blog pe pagina de pornire. În timp ce unii oameni preferă acest stil, majoritatea sistemelor de blogare susțin ideea de a avea un rezumat al fragmentelor în avans și dacă vizitatorii dau clic pe articole, ei pot vedea conținutul pe o pagină separată, eventual comentând o zonă în jurul acestuia.

Vă voi ajuta să creați această vizualizare detaliată a blogului unic în această sesiune, iar noi ne vom concentra pe construirea comentariilor în următoarea.

Pasul 1: Adăugați o coloană sumară

Mai întâi, să adăugăm o coloană pentru rezumat în tabelul Blog:

Pasul 2: Includeți rezumatul în WriteBlogView

Acum, să o adăugăm la Blog.update () funcţie. Puteți modifica funcția pentru a prelua un obiect de date care conține titlul, rezumatul și conținutul, pentru a evita memorarea ordinii variabilelor.

 actualizare: functie (date) // setati ACL numai daca blogul nu are aceasta ... this.set ('title': data.title, 'summary': data.summary, 'content': data.content, ...) salvați (null, ...);  

Adăugați încă unul </code> pentru rezumat în <code># Scrie-TPL</code>:</p> <pre> // Puneți acest grup de formule între grupul de formule pentru titlu și conținut <div> <label for="summary">rezumat</label> <textarea name="summary" rows="3">rezumat

 trimiteți: funcția (e) ... this.model.update (title: data [0] .value, summary: data [1] .value, content: data [2] .value);  

 ... ... ... ... ... ... 

. Acest $ el.html (this.template (atribute)) găsi wysihtml5 (). ( 'Scrie-conținut'.).; 

 #eac blog 
 
titlu
 
La time de authorName
 
rezumat
 
 /fiecare 

 BlogView = Parse.View.extend (template: Handlebars.compile ($ ('blog-tpl'); html ()), render: function () var attributes = this.model.toJSON el.html (this.template (atributele));), 

 rute: ... 'blog /: id': 'blog', ... 

 blog: funcția (id) var query = Parse.Query nou (blog); query.get (id, succes: function (blog) console.log (blog); var blogView = nou BlogView (model: blog); , eroare: funcție (blog, eroare) console.log (eroare););  

 #eac blog 
 
titlu
 
La time de authorName
 
rezumat
 
 /fiecare