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

În ultima noastră sesiune, am construit o vizualizare pentru gestionarea posturilor existente pe blog și am trecut prin ideea unui router. Acum, este timpul să construim funcția de editare.

1. Creați și Render EditBlogView

Pentru a construi o funcție de editare, hai să facem primul EditBlogView. Din nou, acest lucru ar trebui să fie foarte ușor pentru dvs. acum. Am parcurs un drum lung împreună.

Pasul 1: Șablon HTML

Această parte este foarte asemănătoare cu AddBlogView șablon. Singura diferență reală este că, pentru că edităm un blog, trebuie să trecem la titlul și conținutul existent.

Pasul 2: EditBlogView

Și apoi EditBlogView. Din nou, acest lucru este foarte similar cu AddBlogView. În scopul acestui tutorial, ne concentrăm asupra modului de a face să funcționeze mai întâi. În următoarea sesiune, vom face toate lucrările de curățare și vom elimina codul duplicat. Poartă cu mine deocamdată.

EditBlogView = Parse.View.extend (template: Handlebars.compile ($ ('editare-tpl'). Html ()), evenimente: e) e.preventDefault (); // vom scrie funcția trimite mai târziu, render: function () var attributes = this.model.toJSON () ;. $ el.html (this.template (atribute) );)

De data aceasta, nu vom verifica mai întâi și nu ne asigurăm că această parte a codului funcționează - în mod ideal ați făcut acest lucru destul de repede, încât ar trebui să vă simțiți confortabil. Verificați întotdeauna sesiunile anterioare sau lăsați-mi un comentariu dacă vă simțiți blocați.

2. Legătura cu pagina de editare cu router

Acum, să ne asigurăm /Editați | ×/ va face legătura și va afișa vizualizarea corectă a editării.

Pasul 1: / edit /: id

Ultima dată am făcut deja o parte din pregătire. Avem modelul de adresă URL pentru /Editați | × pagina în BlogRouter.routes:

rute: 'admin': 'admin', 'login': 'login', 'add': 'adaugă', 'edita /: url': 'edita'

După cum puteți vedea, modelul de adresă URL indică deja BlogRouter.edit () funcția în care avem o mică funcție de substituent care ia în considerare parametrul url:

editați: funcția (url) 

Aceasta înseamnă că, dacă vizitați http: // localhost / your-directory / edit / what-ever-you-put-aici, BlogRouter.edit () funcția va fi declanșată și variabila URL-ul în cadrul acestei funcții va obține valoarea ce-tot-te-a pus-aici.

Deci, acum, care este cel mai ușor lucru pe care să-l puneți după /Editați | × care ne poate ajuta să găsim postarea exactă pe blog pe care dorim să o editați? Ar trebui să fie id, dreapta? Să schimbăm codul puțin, deci este clar că îl vom pune id Acolo.

rute: 'admin': 'admin', 'login': 'login', 'add': '

Pasul 2: Obțineți un blog prin ID-ul său

Acum că avem id de la adresa URL, trebuie să găsim acel blog special id. Modul de a face acest lucru în Parse.js utilizează o interogare:

editați: funcția (id) // În primul rând, trebuie să definiți o nouă interogare și să îi spuneți care tabel ar trebui să meargă pentru var query = new Parse.Query (Blog); // Dacă sunteți în căutarea unui obiect prin id-ul lor, // trebuie doar să treceți id-ul ca primul parametru în funcția .get () query.get (id, success: function (blog) // Dacă blogul a fost preluat cu succes ., eroare: funcție (blog, eroare) // Dacă blogul nu a fost preluat cu succes.); 

Dacă doriți să aflați mai multe despre interogările Parse, verificați documentația acestora.

Pasul 3: Render editBlogView

Să continuăm să terminăm succes și eroare funcționează în apelul de interogare a interogării.

Pentru succes funcția, vrem să facem un editBlogView folosind postul de blog ca model:

succes: funcția (blog) var editBlogView = nou EditBlogView (model: blog); editBlogView.render (); $ ( 'Main-container.') Html (editBlogView.el).; 

Și pentru eroare funcția, să înregistrăm eroarea ca de obicei:

eroare: funcție (blog, eroare) console.log (eroare); 

Pasul 4: Conectați la / editați pagina

Mergând mai departe, să actualizăm legăturile de editare în # Bloguri-admin-TPL astfel încât acestea să se leagă de fapt /Editați | × pagini. Să-i dăm și o clasă unică, deoarece vom vorbi despre ea:

Editați |

Și pentru a vă asigura că router-ul primește schimbarea adresei URL (pentru că nu este încă static), să scriem propria funcție de legătură pentru a înlocui funcția implicită în BlogAdminView.

Mai întâi, adăugați un eveniment pentru a da clic .app-edit. De aceea am avut nevoie de o clasă înainte!

evenimente: 'click .app-edit': 'edita'

Apoi, în interiorul Editați | ×() funcția, preveniți acțiunea implicită, obțineți valoarea href și utilizați blogRouter.navigate () pentru al declanșa.

editați: funcția (e) e.preventDefault (); var href = $ (e.target) .attr ('href'); blogRouter.navigate (href, declanșator: adevărat); 

Acum putem testa:

Testarea ar putea fi un pic dificil în acest moment, deoarece routerul nu este încă în plin set. Accesați http: //localhost/your-directory/admin.html ca punct de pornire de fiecare dată când vă reîmprospătați. Vom avea grijă de asta în următoarea sesiune.

3. Trimiteți editarea blogului

Suntem atât de aproape de a obține funcționarea acestei pagini. Trebuie doar să facem EditBlogView.submit () funcția de lucru.

Pasul 1: Blog.update () 

Așa cum am creat-o Blog.create () pentru adăugarea unui nou blog, trebuie să creați acum Blog.update () pentru a salva editările noastre.

actualizare: funcție (titlu, conținut) this.set ('title': title, 'content': content). ('title') + 'a fost salvat!');, eroare: functie (blog, eroare) console.log (blog); console.log (error);); 

După cum puteți vedea, este foarte asemănător cu .crea() dar în loc să creați și să salvați un nou blog, setați mai întâi valoarea pe obiectul curent și apoi salvați-l.

Pasul 2: EditBlogView.submit ()

Acum, să luăm datele din formular în EditBlogView și apelați .a depune() funcția pe model (care se referă la postarea curentă de pe blog redată în vizualizarea de editare). Din nou, foarte asemănător cu cel din AddBlogView:

trimiteți: funcția (e) e.preventDefault (); var date = $ (e.target) .serializArray (); this.model.update (date [0] .value, $ ('textarea') val ()); 

Faceți o încercare și ar trebui să funcționeze!

Dacă ați urmat tutorialul la acest punct, într-adevăr bine făcut.

4. Bonus: Adresa URL care poate fi citită

Dacă nu vă place să vedeți id-ul în url și doriți să fie așa / Edita / ta-blog-titlu /, o puteți face destul de ușor.

Doar adăugați un câmp nou URL-ul la postările dvs. de pe blog și adăugați-le în .crea() funcţie:

'url': title.toLowerCase () .replace (/ [^ \ w] + / g, ') .replace (/ + / g,' - '

Si in BlogRouter.edit (), interogați mesaje de blog de către ei URL-ul valoare:

query.equalTo ("url", url) .find (), apoi (function (blogs) // Aceasta interogare va returna toate blogurile calificate intr-un array // Asa ca primeste primul // Daca vrei sa inveti mai mult, verificați parserul lui Parse.js doc var blog = blogs [0]; ...);

Nu voi da codul aici, pentru că eu cred că o puteți face împreună acum!

Concluzie

Acum totul ar trebui să vină împreună pentru tine. Ați făcut o tona de progres până acum. În această sesiune, am creat întreaga funcție de editare a blogului: de la pregătirea paginii, la configurarea routerului și apoi la actualizarea bazei de date.

Data viitoare vom face o curățare mare în codul nostru. Acum avem multe coduri care se suprapun aici și acolo, pentru că vrem să ne asigurăm că putem construi funcțiile care să funcționeze. Data viitoare, veți fuziona index.html și admin.html, .crea() și .Actualizați(), AddBlogView și EditBlogView. Veți învăța, de asemenea, să construiți o structură solidă de aplicații cu Parse.js. 

Ce altceva? De asemenea, vom revedea routerul, astfel încât adresele URL pot fi statice (ceea ce înseamnă că puteți să le marcați, să le actualizați pagina sau să le trimiteți prietenului dvs.). O mulțime de lucruri bune să vină, deci stați liniștiți!