i ember.js: del 3

går i ember.js: del 3,,,,, 4,,,,,,,,, 24,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss., håber jeg, at du begynder at se, at ember.js er en stærk, men stædig, rammer.vi har kun kradset i overfladen, der er mere at lære, før vi kan bygge noget virkelig nyttigt!vi vil fortsætte med at bruge ember starter kit.i denne del af den serie, vil vi gennemgå adgangen til og forvaltningen af data i ember.,,,, at lege med data i den sidste artikel, vi har arbejdet med en statisk sæt farve navne, der er defineret i en registeransvarlig:, app.indexroute = ember. rute. udvide ((setupcontroller: funktion (controller) {registeransvarlige. ('content, [om, »gul«, blå]);}}); denne lov den registeransvarlige med at afsløre oplysninger til, indeks, model.det er sødt for en demo, men i det virkelige liv, vores kilde til data, ikke vil blive en hård kodet system. dette er, hvor modeller, kommer i.modeller, der er genstand for ansøgningen anvender data over.det kunne være et simpelt system eller data hentet fra en fredfyldt dynamisk json api - grænseflade.selve dataene er tilgængelige for referencer til den model er attributter.så, hvis vi ser på et resultat, som denne: {"login": "rey", "id": 1 "alder": 45, "ligestilling": "mand"}, attributterne udsat i modellen er:,, login, id, alder, køn, selv data der er adgang til, som henviser til model er attributter, som du kan se fra den kode, du kunne definere en statisk butik, men du bruger ember. genstand for at definere deres modeller, det meste af tiden.ved subclassing, ember. ting, du vil være i stand til at returnere data (f.eks. via en ajax kalder) og definere deres model.mens du kan udtrykkeligt fastsat data inden for en registeransvarlig, der altid har anbefalet, at man skaber en model for at overholde adskillelsen af bekymringer og kode organisation bedste praksis. alternativt kan du bruge en søster ramme kaldet ember data.det er en orm som api - og udholdenhed, lagre, men jeg må understrege, at det er inde i en rivende udvikling, som dette skriftligt.det har et stort potentiale, men ved hjælp ember.object, er meget mere sikker på dette tidspunkt.robin ward, medstifter af diskurs, skrev en stor postede på ved hjælp af ember uden ember data.den beskriver den proces, som jeg vil bryde ned til dig, af din modeller, er det i følgende eksempel, jeg skal bruge den uofficielle hacker nyheder api til at trække json baseret på data fra nyhederne ressource.disse data vil blive lagret i min model og senere anvendes af en registeransvarlig, til at fylde en skabelon.hvis vi ser på de returnerede data fra api, vi kan forstå de egenskaber, vi skal arbejde med, {"nextid": null "produkter": [{"titel": "docker, linux beholder runtime: nu open source -", "url: http: //docker. io" "id": 5445387 "commentcount": 39, "point": 146 "postedago": "2 timer siden", "postedby": "shykes"} {"titel": "hvad u0027s egentlig galt med juhu. u0027s køb af summly", "url": "http: //////////////hackingdistributed. kom /2013 /03 /26 /summly /", "id": 5445159 "commentcount": 99, "point": 133 "postedago": "2 timer siden", "postedby": "hoonose"),]"version": "1", "cachedonutc": "\\ /dato (1364333188244) /"}, jeg vil arbejde med den, post, ejendom, som indeholder alle de overskrifter og historie.hvis du har arbejdet med sql databaser, af hvert element af poster, som registrerer og ejendommen navne (dvs.:, titel, url, id, osv.) som område navne.det er vigtigt at grok layout, fordi disse ejendom navne vil blive anvendt som attributter for vores model objekt, som er en perfekt gå over til at skabe den model,.,,, ember.object, er den vigtigste basisklasse for alle ember genstande, og vi kan anvendes til at skabe vores model med dens, extend() metode.,, for at gøre dette, vil vi tilføje følgende kode, er /app.js, umiddelbart efter den kode, der definerer, app. indexroute:, app.item = ember. genstand. extend();,, app.item, tjener som model klasse for hacker nyheder data, men har ingen metoder til at hente eller manipulere dataene.så vi bliver nødt til at definere de:, app. punkt på dagsordenen. reopenclass ((alle: function() {tilbage $. getjson ("http://api.ihackernews.com/page?jsonp &format = amp; callback =? "). - (funktion (reaktion) (var - poster = [] svar. punkter. for hvert (funktion (punkt) {genstande. tryk (app. punkt. skabe en (punkt)}) afkast konti;})}}), lad os bryde koden.først bruger vi ember er, reopenclass(), en metode til at tilføje vores nye metoder til, app.item, klasse, og du skal give den et objekt, der indeholder vores ønskede metoder.for det eksempel, vi skal kun bruge en metode, all(): det returnerer alle overskrifterne fra hacker nyheder forside.fordi jquery er en del af handlen med ember, vi har en simpel ajax api til vores rådighed.api - anvendelser jsonp tilbage json data, så jeg kan bare bruge $. getjson(), fremsender en anmodning: $. getjson ("http://api.ihackernews.com/page?jsonp &format = amp; callback =? ")den "callback =?"fortæller jquery, at dette er en jsonp anmodning, og data (når det er hentet) er gået til et anonymt opkald kontaktperson defineret ved hjælp af jquery løfter funktioner:,. så (funktion (reaktion) (...)), kan jeg let at pumpe i min json data i en glød objekt.,,, svar, json parameter indeholder de data, som gør det muligt at sløjfe over dokumenter og ajourføre de lokale produkter, system med tilfælde af app. punkt.endelig vender vi tilbage til den nyligt befolkede system, når all(), udfører.det er en masse ord, så lad mig sammenfatte:,, skabe nye model klasse af subclassing, ember.object, bruger, extend(),., tilføje din model metoder, hvor der anvendes, reopenclass(),., foretage en ajax opfordring til at hente din data., loop over data, som skaber et punkt, genstand, og at det i et system, returnerer den vifte, når metoden henretter.,, hvis du opfriske, index.html, vil du se at intet har ændret sig.det giver mening, fordi den model er kun blevet defineret; vi har ikke fået det, udsætter deres data, kontrollører handle som befuldmægtigede, giver dig adgang til model attributter og om modeller for at få adgang til dem for at dynamisk gøre skærmen.ud over at få adgang til attributter fra et associeret model, kontrollører kan også opbevares andre anvendelse egenskaber, der skal fortsætte uden at spare på en server, i øjeblikket er vores app har følgende controller (den, der definerer en statisk data):, app.indexroute = ember. rute. udvide ((setupcontroller: funktion (controller) (registeransvarlige. sæt ('content, [om, »gul«, blå]);}}), kan vi direkte forbinder vores model, app.indexroute ved, model, metode (alias modellen krog):, app.indexroute = ember. rute. udvide ((model: function() {tilbage app. punkt på dagsordenen. all();}}), kan du huske det ember definerer deres tilsynsførende, hvis du ikke udtrykkeligt definerer det selv, og det er, hvad der sker i dette tilfælde, behin.d de scener, ember skaber, indexcontroller, som et tilfælde af ember. arraycontroller, og anvender den model, der er angivet i modellen, metode.,, nu mangler vi bare at ajourføre indeks skabelon for at få adgang til det nye attributter.om åbning, index.html, kan vi se følgende kode: styret skabelon, {{# hvert punkt i model) < li > {{punkt}} < /li > {{/hver), med en lille ændring (tilføjelse af afsnit, fast ejendom,), kan vi straks se afsnit tilbage fra hacker nyheder api:,, {{punkt. afsnit),, hvis du opfriske din browser nu, skal du se noget, der svarer til følgende:, < h3 > velkommen til ember. js < /h3 > og lt; ul > < li > persona er omdelt.i dag. < /li > < li > 21, diagrammer, der viser usa 's sundhedsrelaterede priser er latterlige < /li > < li > 10 000 samtidig direkte forbindelser til django < /li > < li > docker, linux beholder runtime: nu open source - < /li > < li > lad os sige feedburner lukker ned... < /li > < /ul >,, hvis du ønsker at vise mere information, blot tilføje flere egenskaber: {{punkt. afsnit) - ((punkt på dagsordenen. postedago}} af {(punkt på dagsordenen. postedby}}, her at se opdateringer, du har lavet.det er det smukke ved styret; det gør det uden at tilføje nye data til brugergrænsefladen. som jeg sagde før, de kan også anvendes til at definere statisk attributter, der skal fortsætte gennem hele livet af din ansøgning.for eksempel, jeg ønsker at fortsætte visse statisk indhold, som denne:, app.indexcontroller = ember. objectcontroller. udvide ((headername: "velkommen til hacker nyheder app, appversion: 2.1.), her, det første, ember.objectcontroller, at skabe en ny tilsynsførende for min, indeks, rute og skabelon arbejde med.jeg kan nu gå til. og opdatere min model til at erstatte følgende:, < h2 > velkommen til ember er < /h2 > med:, < h2 > {{headername}} < /h2 >,, det er ret stærk og fleksible ting!, næste... skabeloner, der arbejder med data i ember er ikke svært.faktisk, det sværeste er at arbejde med de forskellige grænseflader, der er på nettet.,,, at jeg let kan pumpe i min json data i en glød genstand gør forvaltningen betydeligt lettere, men jeg har aldrig været en stor fan af store datasæt på client-side, især når repræsenteret som objekter,.,, der er noget, jeg bliver nødt til at gøre flere tests, og jeg håber, at ember data gør alt det her trivielt.med det sagt, jeg kort inde på modeller i denne artikel.de er meget vigtige.så meget, at jeg vil tage fat på dette emne i sin artikel.så i de næste artikel, går vi over til gearing handelbars at bygge din brugergrænseflade og bore ned i de forskellige direktiver blive ramme giver.



Previous:
Next Page: