Ember sans données d'Ember

Les données Ember ne sont toujours pas à la version 1.0 et j'ai donc décidé d'utiliser Ember sans modèles de données.

J'ai mes propres modèles, et ceux-ci sont créés par la fonction modèle d'itinéraire.

Cependant, le maintien de l'état entre les objets frontal et les objets backend est un cauchemar. Surtout quand une route utilise d'autres modèles d'itinéraires.

  • Comment cela peut-il être réalisé, devrais-je écrire ma propre méthode de recherche de magasin et de modèle?
  • Devrais-je utiliser Ember Data (même si ce n'est pas à la version 1.0?) Peut-être un ETA sur Ember Data 1.0?
  • Écrivez un code pour mettre à jour les modèles sur le frontend chaque fois que je change un modèle?
  • Une autre méthode?

Est ce que je fais les meilleures pratiques ou devrais-je faire cela différemment? Mon intuition est que, sans utiliser Ember Data, je devrais écrire mon propre magasin. J'aimerais recevoir des commentaires de certains d'entre vous.

Exemple d'un modèle:

App.Person = Ember.Object.extend(App.Serializable,Em.Copyable,{ user_email : null //used in routing dynamic segements and as old email when making changes to email ,first_name: null , last_name: null , fullname : function () { return this.first_name + ' ' + this.last_name; }.property('first_name','last_name').cacheable() }; App.Person.reopenClass({ createRecord: function(data) { return App.Person.create({ user_email : data.email , first_name: data.first_name , last_name : data.last_name }}); 

Exemple de chargement des modèles de classe:

 App.UsersRoute = App.AuthenticatedRoute.extend( { model : function () { return new Ember.RSVP.Promise(function(resolve, reject) { $.getJSON('/users').then(function(usersData) { var userObjects = []; usersData.forEach(function (data) { userObjects.pushObject(App.Person.createRecord(data)); }); resolve( userObjects); },function(error) { reject(error); }); }) }, 

Subroutes utilise le modèle:

 App.UsersAvailableRoute = App.AuthenticatedRoute.extend( { model : function () { return { allUsers : Ember.ArrayController.create({ content : this.modelFor('users').filter( function (user) { return user.availablity === 100 }), 

Exemple de mise à jour du modèle dans un contrôleur:

 App.UsersAvailableController = Ember.ArrayController.extend({ needs : ['users'] ,applyPersonAssign : function (person,need,project) { need.set('allocated',person); var updateObject = Ember.copy(project,true); if (Ember.isEmpty(need.get('inProject'))) { updateObject.projectNeeds.pushObject(need); } return $.ajax({ url: '/projects/' + updateObject.get('codename'), "type": "PUT", "dataType": "json", data: updateObject.serialize() }) 

    Vous n'avez pas nécessairement besoin de recréer le magasin Ember Data. Ember travaille très bien avec les POJO, vous pouvez également envelopper vos POJO dans un objet Ember pour vous divertir de manière intégrée.

    Cela étant dit, la création d'un adaptateur personnalisé qui met en cache les résultats pourrait être pratique.

    Voici un exemple où je crée un adaptateur prenant en charge la mise en cache. Vous pouvez construire lentement le concept pour toutes les choses de base dont vous avez besoin.

     App.FooAdapter = Ember.Object.extend({ cache:{}, find: function(id){ var self = this, record; if(record = this.cache[id]){ return Ember.RSVP.cast(record); } else { return new Ember.RSVP.Promise(function(resolve){ resolve($.getJSON('http://www.foolandia.com/foooo/' + id)); }).then(function(result){ record = self.cache[id] = App.Foo.create(result); return record; }); } } }); 

    Dans les exemples ci-dessous, j'utilise le conteneur pour enregistrer l'adaptateur sur tous mes chemins / contrôleurs, de sorte que j'ai eu un accès paresseux facile à cela.

    http://emberjs.jsbin.com/OxIDiVU/742/edit

    Si vous voulez toujours que cela soit une promesse:

    http://emberjs.jsbin.com/OxIDiVU/740/edit

    Réutilisabilité

    L'exemple ci-dessus peut faire en sorte que vous deviez faire une quantité de travail, mais n'oubliez pas, Ember est super réutilisable, profitez de la magie.

     App.MyRestAdapter = Em.Object.extend({ type: undefined, find: function(id){ $.getJSON('http://www.foolandia.com/' + this.get('type') + '/' + id } }); App.FooAdapter = App.MyRestAdapter.extend({ type: 'foo' // this would create calls to: http://www.foolandia.com/foo/1 }); App.BarAdapter = App.MyRestAdapter.extend({ type: 'bar' // this would create calls to: http://www.foolandia.com/bar/1 }); 

    C'est l'idée fondamentale de ce qu'est Ember Data / Ember Model. Ils ont essayé de créer une tonne de défauts et construit dans la fraîcheur, mais parfois c'est trop, surtout si vous consommez des données et que vous ne faites pas de CRUD.

    Exemple: http://emberjs.jsbin.com/OxIDiVU/744/edit

    Aussi, vous pouvez lire ceci (dit les mêmes choses):

    Comment créez-vous un adaptateur personnalisé pour ember.js?

    Lorsque je travaille, nous utilisons Ember Data et Ember CLI malgré leur instabilité. Jusqu'à présent, Ember Data n'a pas causé trop de douleur et de souffrance ici. Le magasin est assez facile à comprendre, et la documentation sur Ember pour cette facette du cadre est plutôt bonne. La seule question que j'ai eu a trait aux modèles de tri dynamiquement, et comme je modifie le contenu, ils changent selon les changements que je fais, et quelque part le long de la route, des choses vraiment étranges se produisent, pas sûr si c'est Ember Faute de données.

    En bref, nous avons trouvé un certain succès en utilisant Ember Data, et nous ne pouvons pas nous en vouloir si c'est l'itinéraire que vous souhaitez aller.

    Si vous êtes familier avec Ruby, Rails est une excellente solution pour un backend.

    La communauté de braise a supporté les rails avec le gemme de braises qui vous permet d'utiliser des rails comme moyen de servir JSON.

    Commencer

    • Ajoutez le joyau à votre application Gemfile:

      Gem 'ember-rails' gem 'ember-source', '~> 1.9.0' # ou la version dont vous avez besoin

    • Exécuter l' bundle install

    • Ensuite, générez la structure de l'application:

      Les rails engendrent du braise: bootstrap

    • Redémarrez votre serveur (s'il fonctionne)

    Créer un nouveau projet à partir de zéro

    Rails prend en charge la capacité de construire des projets à partir d'un fichier de ruby ​​source source.

    Pour créer un projet Ember Centric Rails, vous pouvez simplement taper ce qui suit dans votre ligne de commande:

     rails new my_app -m http://emberjs.com/edge_template.rb 

    Pour installer les dernières versions de matériaux de braise et de braise. Il convient de noter que les exemples du guide de démarrage ont été conçus pour utiliser la version publiée de la braise:

     rails generate ember:install 

    Ensuite, tout ce que vous devez faire est de rendre json dans vos contrôleurs, comme celui-ci

     class ProjectsController < ApplicationController def index respond_to do |format| format.json { render json: Project.all } end end def show respond_to do |format| format.json { render json: Project.where(name: params[:name])} end end end 

    Assurez-vous de mettre à jour vos sérialisateurs

     class ProjectSerializer < ApplicationSerializer attributes :id, :name, :description, :imgUrl, :deployUrl end 

    Configurez vos itinéraires

     EmberRailsBlog.ProjectsRoute = Ember.Route.extend({ model: function(){ return this.store.find('project'); } }); 

    Et enfin votre modèle

     var attr = DS.attr; EmberRailsBlog.Project = DS.Model.extend({ name: attr(), description: attr(), imgUrl: attr(), deployUrl: attr() });