web-dev-qa-db-fra.com

ember.js et le serveur

Je regarde Ember.js et j'ai lu les documents pour essayer de comprendre comment l'utiliser. Je comprends (assez bien), sauf pour une chose. Pour ma façon de penser dans le modèle MVC, le modèle est le référentiel de données dans l'application. Je peux voir comment cela fonctionne pour les données côté client dans Ember.js. Ce que je ne comprends pas, c'est comment lier ces données au serveur afin que si les données changent sur le client, les modifications sont mises à jour sur le serveur. Et vice versa. J'ai fait cela dans mes applications Web en faisant des appels Ajax/JSON dans les deux sens vers le serveur, je ne comprends tout simplement pas comment faire cela en utilisant Ember.js.

javascriptjqueryajaxmodel-view-controllerember.js
42
writes_on

Creuser un peu autour emberjs sur GitHub J'ai trouvé ceci: https://github.com/emberjs/data :

Ember Data est une bibliothèque pour charger des modèles à partir d'une couche de persistance (telle qu'une API JSON), mettre à jour ces modèles, puis enregistrer les modifications. Il fournit de nombreuses fonctionnalités que vous trouverez dans les ORM côté serveur comme ActiveRecord, mais est conçu spécifiquement pour l'environnement unique de JavaScript dans le navigateur.

Je suggère également de lire Ember.js Live Collections . Ce que vous voulez, c'est avoir une collection de modèles qui sauront se synchroniser avec le côté serveur, un exemple de code possible est:

// our model
App.Person = Ember.Object.extend();

App.people = Ember.ArrayController.create({
  content: [],
  save: function () {
    // assuming you are using jQuery, but could be other AJAX/DOM framework
    $.post({
      url: "/people",
      data: JSON.stringify( this.toArray() ),
      success: function ( data ) {
        // your data should already be rendered with latest changes
        // however, you might want to change status from something to "saved" etc.
      }
    });
  }
});

Vous appelleriez alors App.people.save() aux occasions nécessaires.

Assurez-vous également de consulter cet article, Conseils et instructions sur l'utilisation d'Ember.js , qui va plus loin dans la communication serveur-client avec Ember et mentionne également emberjs/data .

Remarque : Emberjs Data Library doit être utilisé avec prudence car il n'est pas prêt pour la production.

51
Misha Reyzlin

Dans Ember.js, le "modèle" contenu dans l'objet Ember contiendra une abstraction supplémentaire d'une base de données côté serveur sous-jacente, si vous en utilisez une. La partie contrôleur de l'application devrait alors avoir des méthodes qui vous permettent de récupérer et d'envoyer des données qui sont appelées en cas de besoin afin de mettre à jour le modèle (en utilisant Ajax). C'est bien parce que vous avez un modèle qui peut répondre rapidement du côté client à n'importe quelle entrée qu'un utilisateur fournit à l'application (frappes, mouvements de la souris, etc.) et choisir sélectivement quand faire des requêtes relativement coûteuses à une base de données côté serveur, par exemple. De cette façon, certaines des performances de l'application ne sont plus gênées par la latence des demandes de données vers un serveur externe, ce qui peut dans certains cas vous permettre de créer des applications dont la réactivité se rapproche de celle des applications natives.

6
Peter Behr

J'aime représenter Ember.js par paires comme ceci

  • Les vues et les modèles sont corrélés (évidemment), Tweak the Views-Class pour contrôler le modèle (comme les classNames)
  • Le routeur et les routes fonctionnent un peu comme le contrôleur dans MVC. Ils sont responsables du routage de la demande vers le point de terminaison correct
  • Le contrôleur et le modèle sont centrés sur le modèle, l'un (le modèle) décrit les données que vous manipulerez dans votre application tandis que le contrôleur se comporte comme une sorte de proxy (ou décorateur, si cela vous convient davantage). Les modèles se connecteront au contrôleur par exemple et

Fondamentalement, cela signifie que vous chargez votre contrôleur (unique ou tableau) avec un modèle et pouvez maintenant facilement modéliser les processus travaillant sur ce modèle (c'est-à-dire les éléments qui ne touchent pas le modèle dans son cœur/données) dans votre contrôleur. Pour un exemple d'application de blog, vous décririez le message dans le modèle et ajouter quelque chose comme ça pour le contrôleur

App.PostController = Ember.ObjectController.extend({
  content: null,

  // initial value
  isExpanded: false,

  expand: function() {
    this.set('isExpanded', true)
  },

  contract: function() {
    this.set('isExpanded', false)
  }
});

Vous pouvez maintenant interagir avec la représentation du modèle en termes de réflexion frontale via le contrôleur. Développer ou non une publication ne change pas le modèle, seule la modification des données le fait.

En termes de rechargement des données depuis le serveur, j'ai deux réponses pour vous

  1. J'ai trouvé cet article très utile pour comprendre les connexions (et l'interrogation simple, bien que simple)
  2. Si vous utilisez Rails, vous aurez de la chance avec la prochaine Rails 4 Live, voir ce post et démo pour les parties juteuses
5
Ronald

Je me rends compte que c'est un peu vieux d'une question, mais c'est sur la page la mieux notée pour ember.js, alors j'ai pensé que j'ajouterais un peu.

J'ai utilisé ember-model récemment pour gérer la liaison de données RESTful. Il a moins de cloches et de sifflets, mais pour mes besoins, c'est assez décent. Fondamentalement, il étend simplement la fonctionnalité du modèle pour s'intégrer raisonnablement bien avec un serveur poussant des objets JSON via une interface standard REST.

1
pfooti