Entrer dans Ember.js Partie 3

J'espère que vous commencez à voir qu'Ember.js est un framework puissant, mais néanmoins avisé. Nous n'avons fait qu'effleurer sa surface. il y a plus à apprendre avant de pouvoir construire quelque chose de vraiment utile! Nous allons continuer à utiliser le kit de démarrage Ember. Dans cette partie de la série, nous examinerons l’accès et la gestion des données dans Ember..

Jouer avec les données

Dans le dernier article, nous avons travaillé avec un ensemble statique de noms de couleurs définis dans un contrôleur:

App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('contenu', ['rouge', 'jaune', 'bleu']););

Cela a permis au contrôleur d’exposer les données au indice modèle. C'est mignon pour une démo, mais dans la vraie vie, notre source de données ne sera pas un tableau codé en dur.

C'est ici que des modèles entre. Des modèles sont des représentations d'objets des données utilisées par votre application. Il peut s'agir d'un simple tableau ou de données récupérées dynamiquement à partir d'une API JSON RESTful. Les données elles-mêmes sont accessibles en référençant les attributs du modèle. Donc, si nous regardons un résultat comme celui-ci:

"login": "rey", "id": 1, "age": 45 ans, "genre": "homme"

Les attributs exposés dans le modèle sont:

s'identifier
identifiant
âge
le sexe

On accède aux données elles-mêmes en référençant les attributs du modèle.

Comme vous le voyez dans le code ci-dessus, vous pouvez définir un magasin statique, mais vous utiliserez Ember.Object pour définir vos modèles la plupart du temps. Par sous-classement Ember.Object, vous pourrez renvoyer des données (par exemple, via un appel Ajax) et définir votre modèle. Bien que vous puissiez définir explicitement les données dans un contrôleur, il est toujours recommandé de créer un modèle afin de respecter la séparation des préoccupations et les meilleures pratiques en matière d'organisation de code..

Alternativement, vous pouvez utiliser un framework frère appelé Ember Data. Il s'agit d'une API et d'un magasin de persistance semblables à ceux de l'ORM, mais je tiens à souligner qu'il est en pleine mutation au moment de la rédaction de cet article. Il a beaucoup de potentiel, mais en utilisant Ember.Object est beaucoup plus sûr en ce moment. Robin Ward, cofondatrice de Discourse, a écrit un excellent article sur l'utilisation d'Ember sans Ember Data. Il décrit leur processus, que je vais décomposer pour vous.

Définir vos modèles

Dans l'exemple suivant, je vais utiliser l'API non officielle Hacker News pour extraire des données JSON de la ressource news. Ces données seront stockées dans mon modèle et utilisées ultérieurement par un contrôleur pour remplir un modèle. Si nous examinons les données renvoyées par l'API, nous pouvons comprendre les propriétés avec lesquelles nous allons travailler:

"nextId": null, "items": ["title": "Docker, l'exécution du conteneur Linux: maintenant open-source", "url": "http://docker.io", "id": 5445387 , "commentCount": 39, "points": 146, "postedAgo": "Il y a 2 heures", "postedBy": "shykes", "title": "Qu'est-ce qui ne va pas avec Yahoo \ u0027s? Achat de Summly "," url ":" http://hackingdistributed.com/2013/03/26/summly/ "," id ": 5445159," commentCount ": 99," points ": 133," postedAgo ":" 2 heures Il y a "," postedBy ":" hoonose ",]," version ":" 1.0 "," cachedOnUTC ":" \ / Date (1364333188244) \ / "

Je veux travailler avec le articles propriété, qui contient tous les titres et informations de l'histoire. Si vous avez travaillé avec des bases de données SQL, pensez à chaque élément de articles comme un enregistrement et les noms de propriété (c'est-à-dire: Titre, url, identifiant, etc.) comme noms de champs. Il est important de définir la mise en page car ces noms de propriétés seront utilisés comme attributs de notre objet modèle, ce qui est un passage parfait dans la création du modèle..

Ember.Object est la classe de base principale pour tous les objets Ember, et nous la sous-classons pour créer notre modèle à l'aide de étendre() méthode.

Pour ce faire, nous ajouterons le code suivant à js / app.js immédiatement après le code qui définit App.IndexRoute:

App.Item = Ember.Object.extend ();

App.Item sert de classe de modèle pour les données de Hacker News, mais il ne dispose d'aucune méthode pour récupérer ou manipuler ces données. Nous devrons donc définir ceux-ci:

 App.Item.reopenClass (all: function () return $ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?") .Then (function (réponse) var items = [ ]; response.items.forEach (function (item) items.push (App.Item.create (item));); return items;););

Décomposons ce code. Tout d'abord, nous utilisons Ember reopenClass () méthode pour ajouter nos nouvelles méthodes à la App.Item classe, et vous lui passez un objet qui contient nos méthodes souhaitées. Pour cet exemple, nous n’avons besoin que d’une méthode appelée tout(): il renvoie tous les titres de la page d'accueil de Hacker News. Parce que jQuery fait partie du contrat avec Ember, nous avons son API Ajax simple à notre disposition. L'API utilise JSONP pour renvoyer des données JSON. alors, je peux juste utiliser $ .getJSON () faire la demande à:

$ .getJSON ("http://api.ihackernews.com/page?format=jsonp&callback=?")

Le "callback =?" indique à jQuery qu'il s'agit d'une demande JSONP et que les données (une fois récupérées) sont transmises à un gestionnaire de rappel anonyme défini à l'aide de la fonctionnalité promesses de jQuery:

.alors (fonction (réponse) …);

Je peux facilement pomper mes données JSON dans un objet Ember.

le réponse Ce paramètre contient les données JSON, vous permettant de parcourir les enregistrements et de mettre à jour les informations locales. articles tableau avec des instances de App.Item. Enfin, nous retournons le tableau nouvellement rempli lorsque tout() exécute. Cela fait beaucoup de mots, alors laissez-moi résumer:

Créez votre nouvelle classe de modèle en sous-classant Ember.Object en utilisant étendre().
Ajoutez vos méthodes de modèle en utilisant reopenClass ().
Faites un appel Ajax pour récupérer vos données.
Boucle sur vos données, créant un Article objet et en le poussant dans un tableau.
Renvoie le tableau lorsque la méthode s'exécute.

Si vous actualisez index.html, vous verrez que rien n'a changé. Cela a du sens car le modèle n’a été défini que; nous n'y avons pas accédé.

Exposer vos données

Les contrôleurs agissent comme des mandataires, vous donnant accès aux attributs du modèle et permettant aux modèles d'y accéder afin de rendre l'affichage de manière dynamique. En plus d'accéder aux attributs à partir d'un modèle associé, les contrôleurs peuvent également stocker d'autres propriétés d'application qui doivent persister sans être enregistrées sur un serveur..

Actuellement, notre application dispose du contrôleur suivant (celui qui définit un ensemble de données statiques):

App.IndexRoute = Ember.Route.extend (setupController: function (controller) controller.set ('contenu', ['rouge', 'jaune', 'bleu']););

Nous pouvons directement associer notre modèle à App.IndexRoute en utilisant le modèle méthode (AKA le crochet modèle):

App.IndexRoute = Ember.Route.extend (model: function () return App.Item.all (););

Rappelez-vous qu'Ember définit votre contrôleur si vous ne le définissez pas vous-même explicitement, et c'est ce qui se passe dans ce cas..

En coulisse, Ember crée IndexController comme exemple de Ember.ArrayController, et il utilise le modèle spécifié dans le modèle méthode.

Il ne reste plus qu'à mettre à jour le modèle d'index pour accéder aux nouveaux attributs. Ouverture index.html, nous pouvons voir le code de modèle de guidon suivant:

#chaque article dans le modèle article
 /chaque

Avec un petit changement (en ajoutant le Titre propriété), nous pouvons immédiatement voir les titres renvoyés par l’API Hacker News:

item.title

Si vous actualisez votre navigateur maintenant, vous devriez voir quelque chose de similaire au suivant:

 Bienvenue sur Ember.js
 Persona est distribué. Aujourd'hui.
 21 graphiques montrant que les prix des soins de santé en Amérique sont ridicules
 10 000 connexions simultanées en temps réel vers Django
 Docker, le runtime du conteneur Linux: maintenant open-source
 Disons que FeedBurner s'arrête…

Si vous souhaitez afficher plus d'informations, ajoutez simplement d'autres propriétés:

item.title - item.postedAgo par item.postedBy

Actualisez pour voir les mises à jour que vous avez apportées. C'est la beauté du guidon. il est facile d'ajouter de nouveaux éléments de données à l'interface utilisateur.

Comme je l'ai déjà mentionné, les contrôleurs peuvent également être utilisés pour définir des attributs statiques devant persister tout au long de la vie de votre application. Par exemple, je peux vouloir conserver certains contenus statiques, comme ceci:

App.IndexController = Ember.ObjectController.extend (headerName: "Bienvenue dans l'application Hacker News", appVersion: 2.1);

Ici, je sous-classe Ember.ObjectController créer un nouveau contrôleur pour mon indice itinéraire et modèle pour travailler avec. Je peux maintenant aller à index.html et mettre à jour mon modèle pour remplacer ce qui suit:

Bienvenue sur Ember.js

avec:

headerName

Des modèles sont des représentations d'objets des données utilisées par votre application.

Le guidon prendra les attributs spécifiés dans mon contrôleur et remplacera dynamiquement le headerName espace réservé avec sa valeur homonyme. Il est important de renforcer deux choses:

En adhérant aux conventions de dénomination d'Ember, je n'ai pas eu besoin de câblage pour pouvoir utiliser le contrôleur avec le modèle d'index..
Même si j’ai créé explicitement un IndexController, Ember est assez intelligent pour ne pas écraser le modèle existant qui a été associé via la route.

C'est assez puissant et flexible!

Prochaine étape… Modèles

Travailler avec des données dans Ember n'est pas difficile. En réalité, le plus difficile est de travailler avec les différentes API qui abondent sur le Web..

Le fait que je puisse facilement pomper mes données JSON dans un objet Ember facilite considérablement la gestion, même si je n'ai jamais été un grand fan de grands ensembles de données côté client, en particulier lorsqu'ils sont représentés sous forme d'objets..

C’est quelque chose sur lequel je devrai faire plus de tests et j’espère que Ember Data rendra tout cela trivial..

Cela dit, j'ai brièvement abordé les modèles dans cet article. Ils sont très importants… à tel point que je veux aborder ce sujet dans son propre article. Ainsi, dans le prochain article, nous verrons comment utiliser Handelbars pour construire votre interface utilisateur et détailler les différentes directives proposées par la structure de modèles..

Code