Share
Ik hoop dat je begint te zien dat Ember.js een krachtig, maar eigenzinnig kader is. We hebben alleen het oppervlak gekrast; er valt nog meer te leren voordat we iets echt nuttigs kunnen bouwen! We zullen de Ember Starter Kit blijven gebruiken. In dit deel van de serie zullen we de toegang tot en het beheer van gegevens binnen Ember bespreken.
In het laatste artikel hebben we gewerkt met een statische reeks kleurnamen die binnen een controller zijn gedefinieerd:
Accentsconagua
App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('content', ['red', 'yellow', 'blue']);); Hierdoor kon de controller de gegevens blootstellen aan de inhoudsopgave sjabloon. Dat is schattig voor een demo, maar in het echte leven zal onze gegevensbron geen hardgecodeerde array zijn.
Dit is waar modellen komt binnen. modellen zijn objectrepresentaties van de gegevens die uw toepassing gebruikt. Het kan een eenvoudige array zijn of gegevens die dynamisch worden opgehaald uit een RESTful JSON API. De gegevens zelf worden geopend door te verwijzen naar de kenmerken van het model. Dus als we naar een resultaat als dit kijken:
"login": "rey", "id": 1, "age": 45, "gender": "male"
De kenmerken die in het model worden weergegeven zijn:
Gegevens zelf worden geopend door te verwijzen naar de kenmerken van het model.
Zoals u kunt zien aan de hand van de bovenstaande code, kunt u een statische winkel definiëren, maar gebruikt u Ember.Object om uw modellen de meeste tijd te definiëren. Door te subclasseren Ember.Object, je kunt gegevens retourneren (bijvoorbeeld: via een Ajax-oproep) en je model definiëren. Hoewel u expliciet gegevens in een controller kunt instellen, wordt u altijd aangeraden een model te maken om u te houden aan de scheiding van punten van zorg en de beste werkwijzen van de code..
Als alternatief zou je een zuster framework kunnen gebruiken, genaamd Ember Data. Het is een ORM-achtige API en een persistentiewinkel, maar ik moet benadrukken dat deze in een stroomversnelling is vanaf dit moment. Het heeft veel potentieel, maar gebruikt Ember.Object is op dit moment veel veiliger. Robin Ward, mede-oprichter van Discourse, schreef een geweldige blogpost over het gebruik van Ember zonder Ember Data. Het schetst hun proces, dat ik voor je zal afbreken.
In het volgende voorbeeld ga ik de niet-officiële Hacker News API gebruiken om op JSON gebaseerde gegevens uit de nieuwsbron te halen. Deze gegevens worden opgeslagen in mijn model en later gebruikt door een controller om een sjabloon te vullen. Als we de gegevens bekijken die worden geretourneerd door de API, kunnen we de eigenschappen begrijpen waarmee we werken:
"nextId": null, "items": ["title": "Docker, de Linux-containerruntime: nu open-source", "url": "http://docker.io", "id": 5445387 , "commentCount": 39, "points": 146, "postedAgo": "2 hours ago", "postedBy": "shykes", "title": "What \ u0027s Really Wrong with Yahoo \ u0027s Purchase of Summly "," url ":" http://hackingdistributed.com/2013/03/26/summly/ "," id ": 5445159," commentCount ": 99," points ": 133," postedAgo ":" 2 uur geleden "," postedBy ":" hoonose ",]," version ":" 1.0 "," cachedOnUTC ":" \ / Date (1364333188244) \ / "
Ik wil werken met de items eigendom, dat alle headlines en verhaalinformatie bevat. Als je met SQL-databases hebt gewerkt, denk dan aan elk element van items als een record en de eigendomsnamen (dat wil zeggen: titel, url, ID kaart, etc.) als veldnamen. Het is belangrijk om de lay-out te laten groeien omdat deze eigenschapsnamen worden gebruikt als de kenmerken van ons modelobject, wat een perfecte overgang is naar het maken van het model.
Ember.Objectis de hoofdbasisklasse voor alle Sint-beren-objecten, en we zullen deze subklassen om ons model te maken met behulp van zijnuitbreiden()methode.
Om dit te doen, zullen we de volgende code toevoegen aan js / app.js onmiddellijk na de code die definieert App.IndexRoute:
App.Item = Ember.Object.extend ();
App.Item fungeert als de modelklasse voor de Hacker News-gegevens, maar er zijn geen methoden om die gegevens op te halen of te manipuleren. Dus we zullen die moeten definiëren:
App.Item.reopenClass (all: function () return $ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?") .Then (function (response) var items = [ ]; response.items.forEach (functie (item) items.push (App.Item.create (item));); return items;);); Laten we deze code opsplitsen. Eerst gebruiken we Ember's reopenClass () methode om onze nieuwe methoden toe te voegen aan de App.Item klasse, en je geeft het een object door dat onze gewenste methoden bevat. Voor dit voorbeeld hebben we slechts één methode nodig allemaal(): het geeft alle koppen terug van de voorpagina van Hacker News. Omdat jQuery deel uitmaakt van de deal met Ember, hebben we de eenvoudige Ajax API tot onze beschikking. De API gebruikt JSONP om JSON-gegevens te retourneren; dus ik kan gewoon gebruiken $ .GetJSON () om het verzoek in te dienen om:
$ .GetJSON ( "http://api.ihackernews.com/page?format=jsonp&callback=?")
De "callback =?" vertelt jQuery dat dit een JSONP-aanvraag is en dat de gegevens (nadat deze zijn opgehaald) worden doorgegeven aan een anonieme callback-handler die is gedefinieerd met behulp van de belofunctionaliteit van jQuery:
.dan (functie (antwoord) ...);
Ik kan eenvoudig mijn JSON-gegevens in een Sintel-object pompen.
De antwoord parameter bevat de JSON-gegevens, zodat u de records kunt omlopen en de lokale kunt bijwerken items array met instanties van App.Item. Ten slotte retourneren we de nieuw bevolkte array wanneer allemaal() uitvoert. Dat zijn veel woorden, dus laat me samenvatten:
Ember.Object gebruik makend van uitbreiden().reopenClass ().Item object en duw het in een array.Als je opfrist index.html, je zult zien dat er niets is veranderd. Dit is logisch omdat het model alleen is gedefinieerd; we hebben er geen toegang toe gehad.
Controllers werken als proxies, waardoor u toegang krijgt tot de attributen van het model en u toegang krijgt tot sjablonen om het display dynamisch te renderen. Naast toegang tot kenmerken van een gekoppeld model, kunnen controllers ook andere appeleigenschappen opslaan die moeten worden bewaard zonder op te slaan op een server.
Momenteel heeft onze app de volgende controller (de controller die een statische gegevensset definieert):
App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('content', ['red', 'yellow', 'blue']);); We kunnen ons model direct associëren met App.IndexRoute de ... gebruiken model- methode (AKA de model haak):
App.IndexRoute = Ember.Route.extend (model: function () return App.Item.all (););
Vergeet niet dat Ember uw controller definieert als u deze niet zelf definieert, en dat is wat er in dit geval gebeurt.
Achter de schermen creëert hij
IndexControllerals een voorbeeld vanEmber.ArrayController, en het gebruikt het model gespecificeerd in demodel-methode.
Nu hoeven we alleen de indexsjabloon bij te werken om toegang te krijgen tot de nieuwe kenmerken. Opening index.html, we kunnen de volgende Stuurwoord-sjablooncode zien:
#each item in model
Met een kleine wijziging (toevoeging van de titel eigendom), kunnen we de titels meteen terugzien van de Hacker News API:
titel van het item
Als u uw browser nu vernieuwt, ziet u iets dat lijkt op het volgende:
Welkom bij Ember.js
Als u meer informatie wilt weergeven, voegt u eenvoudig meer eigenschappen toe:
item.title - item.postedAgo op item.postedBy
Vernieuw om de updates te zien die je hebt gemaakt. Dat is de schoonheid van Handlebars; het maakt het triviaal om nieuwe gegevenselementen aan de gebruikersinterface toe te voegen.
Zoals ik eerder al aangaf, kunnen controllers ook worden gebruikt om statische attributen te definiëren die gedurende de hele levensduur van uw applicatie moeten blijven bestaan. Ik wil bijvoorbeeld bepaalde statische inhoud behouden, zoals dit:
App.IndexController = Ember.ObjectController.extend (headerName: 'Welcome to the Hacker News App', appVersion: 2.1);
Hier, ik subklasse Ember.ObjectController om een nieuwe controller voor mijn te maken inhoudsopgave route en sjabloon om mee te werken. Ik kan nu naar toe gaan index.html en werk mijn sjabloon bij om het volgende te vervangen:
Welkom bij Ember.js
met:
HeaderName
modellen zijn objectrepresentaties van de gegevens die uw toepassing gebruikt.
Stuur neemt de gespecificeerde attributen in mijn controller en vervangt dynamisch de HeaderName tijdelijke aanduiding met de naamgevingswaarde. Het is belangrijk om twee dingen te versterken:
IndexController, Ember is slim genoeg om het bestaande model dat via de route is verbonden niet te overschrijven.Dat zijn behoorlijk krachtige en flexibele dingen!
Het werken met gegevens in Sintel is niet moeilijk. In werkelijkheid is het moeilijkste deel werken met de verschillende API's die op het web aanwezig zijn.
Het feit dat ik gemakkelijk mijn JSON-gegevens kan inpompen in een Ember-object, maakt het beheer aanzienlijk eenvoudiger, hoewel ik nog nooit een grote fan van grote gegevenssets aan de clientzijde ben geweest, vooral als ze worden weergegeven als objecten.
Het is iets waar ik nog meer op moet testen, en ik hoop dat dit alles triestig wordt gemaakt door Ember Data.
Met dat gezegd, raakte ik kort in dit artikel op sjablonen. Ze zijn erg belangrijk ... zozeer zelfs dat ik dit onderwerp in zijn eigen artikel wil aanpakken. Dus in het volgende artikel zullen we bespreken hoe u Handelbars kunt gebruiken om uw gebruikersinterface te bouwen en een overzicht te krijgen van de verschillende richtlijnen die het sjabloneringsraamwerk biedt.
