, begynder at bygge din blog med parse.js: tilføje en ny blog,,,,, 215,,,,,,,, 9,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet bygge din blog med parse.js.get begyndte at bygge din blog med parse.js: bruger loginget begyndte opbygningen af din blog med parse.js: router,,, hvad du vil være at skabe,,, har du nogensinde blev forblændet af din idé til et websted, men har du fundet bliver ulykkelig, når de forsøger at gøre det dynamiske og fungere på en server? , med parse.js, alle, der forstår det grundlæggende i html, css og javascript kan skabe en dynamisk websteder og virker web apps.denne lektion vil tage dig igennem processen med at skabe en blog system, skridt for skridt med parse.js.og ved slutningen af denne serie, bør de være i stand til at skabe deres egen cms sted med lethed, i de sidste tre møder, du har bygget fundamentet af blog system.du har skabt en blog klasse og en bruger klasse på parse.com, du er så blogs i front, og du gjorde det muligt for brugeren at logge ind.fra dette møde, vi skal bygge på forskellige funktioner i det administrative udvalg, som begynder med "tilføje en ny blog.,,, 1.skabe og gøre addblogview, trin 1: udarbejde en html skabelon,,, første ting først, lad os forberede en html skabelon til den side, så vi har noget at lege med.Again, you can use existing elements of Bootstrap to speed up the process:,,<script type="text/template" id="add-tpl"> <h2>Adding a New Blog</h2> <form class="form-add" role="form"> <div class="form-group"> <label for="title">Title</label> <input type="text" name="title" class="form-control" id="title" placeholder="Enter Your Blog Title"> </div> <div class="form-group"> <label for="content">Content</label> <textarea name="content" class="form-control" rows="20"></textarea> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button> </form> </manuskript >, tilføje, at til administrationen. html,.,, meddelelse om, at vi gør det til en model, selv om der ikke er nogen dynamisk værdi på dette punkt.jeg gør det fordi:,,, jeg vil gerne beholde min html meget struktureret og alt er sin egen model blok.,, i de kommende mødeperioder, vi skal bygge den kategori dropdown, hvilket potentielt kunne der være dynamisk indhold på denne side. den samme side model ville være genanvendelige, når vi opbygger "klippe" fungerer, og vi er helt klart nødt til at trække de eksisterende indhold, editblogview,.,,, trin 2: skabe, addblogview, videre, gå til, admin.js, og skabe en ny betragtning:, addblogview,.vi kan holde det meget minimal, for nu, da vi er bare gøre model:,, var addblogview = analysere. betragtning. udvide ((model: styret udarbejde ($('# tilføje tpl'). html()), at: function() {. $el. html (. template())}}), trin 3: forbindelse til addblogview, nu, hvor vi har, addblogview, vil vi koble den fra admin - panelet.gå videre og tilføje en knap til, welcomeview:,, < manuskript type = "tekst /model" id = "velkommen tpl" > < h2 > velkommen, <% = brugernavn% >!< /h2 > < knap klasse = "tilføje blog btn btn lg btn primære" > tilføje en ny blog < /knap > < /manuskript >,, og så, du er nødt til at binde en begivenhed på knappen klikker.du kan gøre sådan noget i din administration. js,:,, $(. tilføje blog). ('click, function() (//funktion}), dog, det er ikke nødvendigt, når du bruger parse.js.du kan bare tilføje en begivenhed, en opfattelse,   formål og binder en funktion som denne:,, welcomeview = analysere. betragtning. udvide ((model: styret udarbejde ($('# velkommen tpl'). html()), begivenheder: {"klik. tilføje blog": "tilføjes"), tilføjes: function() {indberetning ('clicked! ");).}), kan du give det et forsøg, før vi går videre:,,,,,, og nu kan vi ændre den funktion at gøre en ny instans, addblogview,.,, tilføje: function() {var addblogview = nye addblogview(); addblogview. render(). $("vigtigste beholder). http: //(addblogview. el)},,,,, føles fantastisk.,,,,, 2.skriv til databasen, alt du behøver er at binde en funktion til at indgive knap på denne side og skrive en blog i jeres database om analysere. kom.,,, trin 1: tilføje en forelægge begivenhed, tilføje en forelægge tilfælde til din addblogview, - det er ikke meget forskellige fra hvis vi tilføjede bare klik.,, addblogview = analysere. betragtning. udvide ((model: styret udarbejde ($('# tilføje tpl'). html()), begivenheder: {'submit. form tilføje ":" stille "}, indsende: funktion (e) (//forelægge funktion går her.}.}), trin 2: omfatter  , blog, klasse, fordi vi forsøger at skrive til blog tabel på parse.com, er vi nødt til at omfatte blog klasse:,, var blog = analysere objekt. udvide ('blog), trin 3: tilføje en  , create(), stilling til  , blog, klasse, og efter det, så lad os tilføje en, create(), funktion til blog klasse, så vi kan kalde det fra ethvert synspunkt, objekt.det vil tage to parametre,  , titel og indhold, og gem det i databasen.,, parse.js gjorde det meget enkelt.når en ny instans af blog klasse er skabt, kan vi bare sætte de værdier, som vi ønsker, at det skal have til, save(), funktion, for at redde det til databasen.,, var blog = analysere objekt. udvide ('blog, {skabe: funktion (afsnit, indhold) (det. sæt ((afsnit: afsnit indhold: indhold, forfatter: analysere. bruger. current()}). redde (null (succes: funktion (blog) (indberetning (»du er tilføjet en ny blog: + blog. kom ('title ')}, fejl: funktion (blog. fejl) (konsol. log (blog); konsol. log (fejl)))));,, eller du kan også bare skrive data i, save(), funktion:,, var blog = parse.object. udvide ('blog, {skabe: funktion (titel og indhold) {. redde ((afsnit: afsnit indhold: indhold, forfatter: analysere. bruger. current()} {succes: funktion (blog) (indberetning (»du er tilføjet en ny blog: + blog. - ('title ')}, fejl: funktion (blog, fejl) (konsol. log (blog); konsol. log (fejl))))), både ville fungere.,,, opmærksom på, at jeg også, forfatter, i databasen med, analysere. bruger. current(),.det er den måde, du skal bruge for at få den pågældende bruger er logget på.,, trin 4: ringe, blog. create(), fra addblogview, nu, som   det endelige skridt til at gøre det arbejde, du har brug for at ringe, blog. create() fra, addblogview, vi har lige skabt., - er det, submit(), funktion:, forelægge: funktion (e) (//undgå misligholdelse forelægge tilfælde f. preventdefault(); //tage form og sætte det ind i en data - objekt var data = $(e.target). serializearray(), //skabe en ny instans blog blog = nye blog(). //. create() blog. skabe (data [0]. værdi, data [1]. værdi);}, giv det en prøve.ser ud som om, det virker!,,,,, og hvis du kontrollere det på parse.com, vil du se det er lagret i blog.,,,,, tillykke!du skriver   til databasen., 3.butikken forfatter navn og af post, så lad os se på bloggen listen igen:,,,,,, vil de bemærke, at i stedet for brugeren navn, viser vi brugerens id. og vi har vist, at den tid, hvor blog er skabt.vi har, createdat, og updatedat, værdier i enden, men de er ikke meget at læse for brugeren,.,, hvis vi ønsker at fastsætte, at der er to generelle tilgange:,,, når vi læser fra databasen, vi får brugernavn af id - kort, og vi skifter format på tidspunktet for post.,, når vi skriver til databasen, vi tilføjer yderligere to områder, opbevarer brugernavn og den tid,.,,, hvis vi tager det første tilgang, vi gør det samme igen og igen, og det er ved hjælp af de besøgende er tid og ressourcer.derfor ønsker vi at gøre det, samtidig med at skrive til databasen.du skal ikke bekymre dig om ting som "hvad hvis brugeren ændrede hans /hendes navn?"men vi kan altid gøre en gruppe opdatering, når det sker.,,, trin 1: tilføje yderligere to kolonner i blog tabel,,, du bør virkelig være bekendt med denne proces.Let's set the name and the type of those two fields as following:,, ,authorName, (String), ,time, (String), ,,Step 2: Add Data Fields to the ,create(), function,,Then you need to modify the ,create(), function to record those values:,,this.save({ 'title': title, 'content': content, 'author': Parse.User.current(), 'authorName': Parse.User.current().get('username'), 'time': new Date().toDateString() },...);,,Notice that I just use the ,.toDateString(), function here; you can use other date functions to get the time format you want.,,,Step 3: Update the Blogs Template to Use Those Values,,,Lastly, let's update ,#blogs-tpl, in ,index.html, to pull the new values:,,<script id="blogs-tpl" type="text/x-handlebars-model "> {{# hver blog}} < div klasse =" postede "> < h2 klasse =" postede titel "> < en href ="&#"> {{navn}} < /a > < /h2 > < p - klassen =" postede meta - "> på {{tid) af {(authorname}} < /p > < div > {{{indhold}}} < /div > < /div > {{/hver}} < /manuskript >, nu kan du slette de eksisterende poster og tilføje nogle flere af de nye" at tilføje en ny blog "side.,,,,, nu på alle områder, må arbejde.,,,,, 4.bonus: wysiwyg redaktør, fordi vi bruger, {{{indhold}}}, i modellen, vil du finde dig allerede kan sætte html brikker i deres indhold, < textarea > og det vil gøre rigtigt i forenden.de fleste mennesker, inklusive mig selv, føler ikke, det er det mest naturlige måde at skrive en blog.,, jeg vil vise dig, hvordan at tilføje en enkelt wysiwyg redaktør meget hurtigt, så ved du, det er let nok.,,, trin 1: downloade stik af,,,, downloade stik af. det er blevet ajourført, men for demo og pædagogiske formål, lad os bruge den gamle.,,, trin 2: forbindelse css og er filer, få filerne, kopier /dist /bootstrap-wysihtml5-0.0.2.css, og læg det i din css mappe.på samme måde, kopier /dist /bootstrap-wysihtml5-0.0.2.min.js og /l /er /wysihtml5-0.3.0.min.js, i dine er mappe., så forbinde disse filer, admin. html,:,, < forbindelse href = "css /bootstrap-wysihtml5-0.0.2. css" rel = "stylesheet" >...< manuskript src = "js /wysihtml5-0.3.0. min.js" > < /manuskript > < manuskript src = "js /bootstrap-wysihtml5-0.0.2. min.js" > < /manuskript >,,, trin 3: for wysihtml5 i javascript,,,,,,, så wysihtml5 alle, du har brug for, er at ringe, wysihtml5() på, < textarea > element.lad os bare sige, at det, render() fungerer, addblogview:, at: function() {. $el. html (. template()). ('textarea '). wysihtml5();}, så i stedet for at blive en almindelig tekst fra, serializearray(), funktion, kan vi få html fra val(),.lad os ændre, create(), ring til anvendelse:,,, blog. skabe (data [0]. værdi: $('textarea '). val()), koden er meget simpelt, føle sig fri til at ændre den for at være mere effektiv, hvis du vil.(klasse navn som vælgeren, lagre, $('textarea '), som en variabel osv.),,, hvis du opfriske og test, det burde virke.,,,,,, da det ikke er formålet med denne lektion, jeg vil stoppe her., wysihtml5, giver mange muligheder ud over det, så tag et kig på disse to genkøbsforretninger, hvis du er interesseret,,,,,,, https://github.com/voog/wysihtml,,,,, https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg, indgåelse, i denne mødeperiode, du gjorde det muligt for brugerne til at tilføje en ny blog.er du forberedt en brugergrænseflade, og knyttet til back - end - database.du har også tilføjet flere områder til blog klasse, så er det mere læsbare på listen.endelig er du også gennemføres en enkelt wysiwyg stik af.jeg tror, det er meget, og jeg håber, du har det på denne måde, også!, i næste mødeperiode, vil vi lægge grunden til en mere funktionel admin - panelet.du vil lære begrebet en router, og du vil fusionere,.,, og admin.html, i én.vi vil desuden output bloggen liste i admin panel, så brugeren kan ændre og slette dem.bliv hængende.