web-dev-qa-db-fra.com

Comment faire un appel ajax depuis un composant EmberJs?

Je voudrais savoir quelle est la bonne façon de faire un appel ajax à partir d'un composant ember. par exemple

Je souhaite créer un composant réutilisable qui permet à un employé d'effectuer une recherche par identifiant d'employé, puis lorsque la réponse revient du serveur, je souhaite mettre à jour le modèle avec les données de la réponse ajax.

Je ne sais pas si c'est la bonne façon de le faire, je suis vraiment nouveau sur emberjs.

export default Ember.Component.extend({
ajax: Ember.inject.service(),
actions: {
    doSearch() {
        showLoadingData();
        var self = this;
        this.get('ajax').post('http://server.ip.com/api/v1/getEmployee', { "id": this }).then(function(data) {
            self.set('model.name', data.name);
            self.set('model.position', data.position);
            hideLoadingData();
        });
    }
}});
javascriptjqueryajaxember.js
6
DeividKamui

EDIT: J'ai mal compris la question, alors voici une version mise à jour de ma réponse:

Premièrement, je pense que vous devriez utiliser des données sur les braises. Ensuite, rechercher un employé par identifiant suffirait pour appeler this.get("store").find("employee", id).

Si vous souhaitez utiliser plain ajax, je vous suggère de créer un Service qui encapsule des détails (URL du point de terminaison de l'API, format de données, etc.) et n'expose que des méthodes simples pour rechercher et mettre à jour des modèles.

Et enfin, pour respecter le modèle "données en dessous, actions en hausse", vous ne devez pas mettre à jour le modèle dans ce composant. Envoyez plutôt une action au contrôleur/composant parent. Ainsi:

app/components/employee-selector.js (le composant que vous écrivez):

export default Ember.Component.extend({
  actions: {
    updateId(id) {
      Ember.$.post("http://server.ip.com/api/v1/getEmployee", { id: params.id }.then((response) => {
        this.sendAction("select", response);
    });
  }
});

app/templates/new/it-request.hbs:

{{employee-selector select=(action "selectEmployee")}}

app/controllers/new/it-request.js:

export default Ember.Controller.extend({
  actions: {
    selectEmployee(employeeData) {
      this.set("model.name", employeeData.name);
      this.set("model.position", employeeData.name);
    }
  }
});

Ancienne réponse:

Une solution idiomatique serait de le faire dans un Route. 

Vous devez d’abord ajouter une route dans app/router.js: 

this.route("employees", function() {
  this.route("show", { path: ":id" });
}

Que définir la route dans app/employees/show/route.js:

import Ember from "ember";

export default Ember.Route.extend({
  model(params) {
    return new Ember.RSVP.Promise((resolve, reject) {
      Ember.$.post("http://server.ip.com/api/v1/getEmployee", { id: params.id }.then(
        (response) => { resolve(response) },
        reject
      );
    });
  }
});

(La seule raison pour laquelle j'ai tout inclus dans une nouvelle promesse est d'autoriser la personnalisation de la réponse - il suffit de remplacer resolve(response) par un code qui transforme la réponse brute du serveur et d'appeler resolve avec cette version transformée).

Mais si vous avez plus de communication avec l'API, et je suppose que vous le ferez, je vous suggère d'essayer d'utiliser ember-data ou toute autre bibliothèque de couches de données pour ember (probablement Orbit).

Ou au moins, écrivez un service qui supprime toute communication avec l'API et utilisez-le partout où vous utiliseriez des requêtes ajax brutes.

4
edziubudzik

Vous pouvez le faire de plusieurs manières!

Tout d’abord, Ember a une bonne adresse alias pour jQuery: Ember.$. Donc, si vous êtes familier avec jQuery, cela devrait être assez facile.

Vous pouvez également utiliser le paquetage Ember RSVP . Il y a un bon exemple ici sur la façon de faire une demande et de faire quelque chose avec la réponse.

Troisièmement, vous pouvez utiliser le service ember-ajax .

Mais ce que vous demandez (mettre à jour le modèle avec les données de la réponse ajax) est déjà intégré à Ember Data. Vous aurez besoin de mapper votre API sur ce que ember attend avec un adaptateur et/ou un sérialiseur. Une fois que votre service est transformé en ce que Ember attend, vous pouvez interroger votre serveur pour un seul enregistrement puis l'enregistrer.

0
Rimian

J'utilisais la classe Ember directement en action, il ressemblait à ceci

actions: {
  doSomething() {
    Ember.$.post('http://your-api-endpoint', data).then(function(response){ /* your callback code */});  
  }
}

Et une autre façon de communiquer avec BE est d'utiliser Ember Store (comme vous l'avez dit), puis en route, vous pouvez obtenir le modèle de BE

exemple

App.PressRoute = Ember.Route.extend({
    route: "press",
    controllerName: 'press',
    model: function(params) {
        var controller = this.controllerFor("Press");

        if(controller.get("loaded") == false) {
            controller.set("loaded",true);
            return this.store.find('Article',{limit: 200});
        }
        else return this.store.all('Article');
    }, 
    renderTemplate: function() {
        this.render('press');
    }
});
0
Kejt