Share
Note de l'éditeur: L'équipe Ember.js a adopté un calendrier de publication accéléré et, à compter de cette date de publication, figure sur la version 1.2.0. Ce tutoriel a été écrit avant la version 1.0, mais bon nombre des concepts sont toujours applicables. Nous faisons de notre mieux pour commander du contenu opportun et ces situations se produisent de temps en temps. Nous allons travailler pour mettre à jour cela à l'avenir.
Dans la partie 3 de ma série Ember, je vous ai montré comment interagir avec des données à l'aide d'Ember Ember.Object classe de base principale pour créer des objets qui définissent les méthodes et les propriétés qui agissent comme un wrapper pour vos données. Voici un exemple:
Accentsconagua
App.Item = Ember.Object.extend (); 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;); Dans ce code, nous sous-classe Ember.Object en utilisant le "étendre()"et créer une méthode définie par l'utilisateur appelée"tout()"qui fait une demande à Hacker News pour les résultats au format JSON de son fil d'actualités.
Bien que cette méthode fonctionne sans aucun doute et soit même encouragée par le discours basé sur l’ambiance, elle nécessite que vous étoffez et exposez l'API avec laquelle vous souhaitez référencer les données. La plupart des frameworks MVC ont tendance à inclure des fonctionnalités de type ORM. Ainsi, si vous êtes habitué à Rails, par exemple, vous serez très familier avec les avantages d'ActiveRecord, qui vous aident à gérer et à gérer le lourd travail d'interaction avec les données..
L'équipe Ember a voulu faire la même chose, mais son objectif principal a été de commencer par obtenir une version v1 stable de son framework de base afin de garantir que des composants complémentaires puissent être construits sur des bases stables. En fait, j’applaudis cela et j’ai en fait mentionné le fait que vous devriez cesser d’utiliser Ember Data à cause de cela..
Maintenant qu'Ember RC8 est sorti et que la v1 semble arriver, j'ai pensé que c'était le bon moment pour commencer à explorer Ember Data et voir ce qu'il offre..
La première chose que je veux souligner, c’est qu’Ember Data est un travail en cours et que, de la même manière qu’Ember a commencé, de nombreux changements d’API brisés auront probablement lieu au cours des prochains mois. Bien que ce ne soit pas idéal, il est important de commencer à regarder comment structurer vos applications à l'aide de la bibliothèque. Pour vous donner une bonne description de ce qu'Ember Data fournit, j'ai copié la description bien écrite de la page GitHub:
Ember Data est une bibliothèque permettant de charger des données à partir d'une couche de persistance (telle qu'une API JSON), de mapper ces données à un ensemble de modèles dans votre application client, de mettre à jour ces modèles, puis de sauvegarder les modifications dans une couche de persistance. Il fournit de nombreuses fonctionnalités que vous retrouveriez dans les ORM côté serveur comme ActiveRecord, mais est spécialement conçu pour l'environnement unique de JavaScript dans le navigateur..
Donc, comme je l'ai mentionné, il est destiné à résumer une grande partie de la complexité du travail avec des données.
Si vous avez lu mes tutoriels précédents, vous devriez être très familiarisé avec la façon de configurer une page pour tirer parti d'Ember. Si vous ne l'avez pas encore fait, vous devriez aller à la page d'accueil d'Ember.js et récupérer le kit de démarrage. Vous pouvez le trouver directement au milieu de la page, car il est affiché via un gros bouton. Cela vous donnera la version la plus récente d'Ember dont vous aurez besoin pour utiliser Ember Data. Le moyen le plus simple d’obtenir une version téléchargeable d’Ember Data consiste à consulter la documentation de l’API des modèles, faites défiler vers le bas et téléchargez la bibliothèque. De plus, vous pouvez aller au construit page pour afficher les dernières versions de toutes les bibliothèques liées à Ember.
Ajouter des données Ember est aussi simple que d’ajouter un autre fichier JavaScript au mélange comme ceci:
Cela vous donne maintenant accès aux objets, méthodes et propriétés d'Ember Data.
Sans configuration, Ember Data peut charger et enregistrer des enregistrements et des relations servis via une API JSON RESTful, à condition de respecter certaines conventions..
Ember utilise un objet spécial appelé un le magasin pour charger des modèles et récupérer des données et est basé sur l'Ember DS.Store classe. Voici comment définir un nouveau magasin:
App.Store = DS.Store.extend (…);
Si vous vous en souvenez de mes articles précédents, "App" est simplement un espace de noms créé pour les objets, méthodes et propriétés de niveau application de l'application. Bien que ce ne soit pas un mot réservé dans Ember, je vous exhorte à utiliser le même nom, car presque tous les tutoriels et démonstrations que j'ai vus l'utilisent par souci de cohérence..
Le magasin que vous créez contiendra les modèles que vous avez créés et servira d'interface avec le serveur que vous définissez dans votre adaptateur. Par défaut, Ember Data crée et associe à votre magasin un adaptateur REST basé sur le serveur. DS.RestAdapter classe. Si vous définissiez simplement le code ci-dessus, un adaptateur serait associé par défaut. La magie de la braise à son meilleur. Vous pouvez également utiliser un adaptateur Fixture si vous travaillez avec des données en mémoire (par exemple, JSON vous chargez du code), mais puisqu'il s'agit d'effectuer des appels d'API, l'adaptateur REST est plus approprié..
Vous pouvez également définir votre propre adaptateur pour les situations dans lesquelles vous avez besoin d'un contrôle plus personnalisé de l'interface avec un serveur à l'aide de la commande adaptateur propriété dans votre déclaration de magasin:
App.Store = DS.Store.extend (adaptateur: 'App.MyCustomAdapter');
Le code que j'ai énuméré en haut de ce tutoriel est un exemple d'utilisation. Ember.Object pour créer les modèles pour votre application. Les choses changent un peu lorsque vous définissez des modèles via Ember Data. Ember Data fournit un autre objet appelé DS.Modèle que vous sous-classe pour chaque modèle que vous souhaitez créer. Par exemple, en prenant le code ci-dessus:
App.Item = Ember.Object.extend ();
Cela ressemblerait maintenant à ceci:
App.Item = DS.Model.Extend ()
Pas beaucoup de différence en termes d'apparence mais une grande différence en termes de fonctionnalité puisque vous avez maintenant accès aux fonctionnalités de l'adaptateur REST ainsi qu'aux relations intégrées d'Ember Data telles que les relations un-à-un, un-à-plusieurs et plus. Le principal avantage, cependant, est qu'Ember Data fournit les points d'ancrage pour interagir avec vos données via vos modèles, au lieu que vous deviez rouler vous-même. En référençant à nouveau le code ci-dessus:
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));); retourner les articles; ); Alors que je devais créer ma propre méthode pour renvoyer tous les résultats de mon appel JSON, Ember Data fournit une trouver() méthode qui fait exactement cela et sert également à filtrer les résultats. Donc, en gros, tout ce que je dois faire, c'est faire l'appel suivant pour renvoyer tous mes enregistrements:
App.Item.find ();
le trouver() méthode enverra une demande Ajax à l'URL.
C’est précisément ce qui attire tant de développeurs dans Ember; la prévoyance donnée pour rendre les choses plus faciles.
Une chose à garder à l'esprit est qu'il est important de définir dans le modèle les attributs que vous prévoyez d'utiliser ultérieurement (par exemple, dans vos modèles). Cela est facile à faire:
App.Post = DS.Model.extend (title: DS.attr ('string')); Dans mon application de démonstration, je souhaite utiliser la propriété title renvoyée via JSON afin d'utiliser le attr () méthode, spécifie quels attributs un modèle a à ma disposition.
Une chose que je veux mentionner est que Ember Data est incroyablement pointilleux sur la structure du JSON retourné. Dans la mesure où Ember exploite les structures de répertoires pour identifier des parties spécifiques de vos applications (souvenez-vous des conventions de dénomination évoquées dans mon premier article sur Ember?), Il pose certaines hypothèses sur la structure des données JSON. Il faut qu’une racine nommée soit utilisée pour identifier les données à renvoyer. Voici ce que je veux dire:
'posts': ['id': 1, 'title': 'Un de mes amis vient de poster ceci.', 'url': 'http://i.imgur.com/9pw20NY.jpg'] [js]Si vous l'aviez défini comme ceci:
[js] 'id': '1', 'titre': 'Un de mes amis vient de publier ceci.', 'url': 'http://i.imgur.com/9pw20NY.jpg', 'id': '2', 'title': 'Un de mes amis vient de poster ceci.', 'url': 'http://i.imgur.com/9pw20NY.jpg',
Ember Data aurait totalement hésité et jeté l'erreur suivante:
Votre serveur a renvoyé un hachage avec l'identifiant de la clé, mais vous n'avez pas de mappage pour cela..
La raison en est que puisque le modèle s'appelle "App.Post", Ember Data s'attend à trouver une URL appelée "posts" à partir de laquelle extraire les données. Donc, si j'ai défini mon magasin en tant que tel:
App.Store = DS.Store.extend (url: 'http: //emberdata.local');
et mon modèle comme ça:
App.Post = DS.Model.extend (title: DS.attr ('string')); Ember Data supposerait que la demande Ajax faite par le trouver() méthode ressemblerait à ceci:
http: //emberdata.local/posts
Et si vous demandiez un ID spécifique (comme find (12)), cela ressemblerait à ceci:
http: //emberdata.local/posts/12
Ce problème me rendit fou, mais faire une recherche trouva beaucoup de discussions à ce sujet. Si vous ne pouvez pas configurer vos résultats JSON de cette manière, vous devrez alors créer un adaptateur personnalisé pour appliquer les résultats aux résultats afin de les sérialiser correctement avant de pouvoir les utiliser. Je ne couvre pas cela ici, mais envisage d'explorer plus de cela bientôt.
Je voulais exprès garder ce tutoriel simple car je savais qu'Ember Data était en train de changer et je voulais donner un bref aperçu de ce qu'il fournissait. J'ai donc créé une application de démonstration rapide qui utilise Ember Data pour extraire des données JSON de mon propre serveur local. Regardons le code.
Je crée d'abord mon espace de nom d'application (ce que vous feriez pour n'importe quelle application Ember):
// Créer notre application d'application = Ember.Application.create ();
Ensuite, je définis mon magasin de données et je déclare le url d'où le modèle extraira les données de:
App.Store = DS.Store.extend (url: 'http: //emberdata.local';);
Dans le modèle, je spécifie l'attribut: Titre, que je vais utiliser plus tard dans mon modèle:
// Notre modèle App.Post = DS.Model.extend (title: DS.attr ('string')); Enfin, j'associe le modèle à l'itinéraire via le hook de modèle. Notez que j'utilise la méthode prédéfinie Ember Data trouver() extraire immédiatement mes données JSON dès le démarrage de l'application:
// Notre route par défaut. App.IndexRoute = Ember.Route.extend (model: function () return App.Post.find (););
Dans le modèle de la page racine (index), j'utilise le #chaque La directive Handlebars vous permet de parcourir les résultats de mes données JSON et de restituer le titre de chacun de mes messages:
C'est tout! Aucun appel Ajax à faire ou des méthodes spéciales pour travailler avec mes données. Ember Data s'est occupé de l'appel XHR et du stockage des données.
Maintenant, c'est incroyablement simpliste et je ne veux pas vous faire croire que ce sont toutes les licornes et les chiots. Pendant que je travaillais avec Ember Data, je me suis retrouvé à vouloir revenir à l’utilisation de Ember.Object où j'avais plus de contrôle. Mais je me rends également compte que beaucoup de travail est en cours pour améliorer Ember Data, en particulier dans la manière dont il gère divers résultats de données. Il est donc important de commencer au moins le processus de compréhension du fonctionnement de cette opération et même d’offrir des commentaires constructifs à l’équipe..
Je vous invite donc vivement à intervenir et à commencer à bricoler, en particulier ceux qui ont une expérience très forte en ORM et qui pourraient aider à déterminer l'orientation de Ember Data. C'est le meilleur moment pour le faire.
