javascript - Correct way to make an ajax call from EmberJs component? - Stack Overflow

admin管理员组

文章数量:1344319

I would like to know what is the correct way to make an ajax call from an ember ponent. for example

I want to create a reusable ponent that makes an employee search by employee's Id, then when the response es back from the server I want to update the model with the data from the ajax response.

I don´t know if this is the correct way to do it, I'm really new on emberjs.

export default Ember.Component.extend({
ajax: Ember.inject.service(),
actions: {
    doSearch() {
        showLoadingData();
        var self = this;
        this.get('ajax').post('', { "id": this }).then(function(data) {
            self.set('model.name', data.name);
            self.set('model.position', data.position);
            hideLoadingData();
        });
    }
}});

I would like to know what is the correct way to make an ajax call from an ember ponent. for example

I want to create a reusable ponent that makes an employee search by employee's Id, then when the response es back from the server I want to update the model with the data from the ajax response.

I don´t know if this is the correct way to do it, I'm really new on emberjs.

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

• javascript
• jquery
• ajax
• ember.js

Share Improve this question Follow edited Jan 20, 2017 at 8:13 DeividKamui asked Jan 20, 2017 at 8:06 DeividKamuiDeividKamui 39211 gold badge44 silver badges1515 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

EDIT: I misunderstood the question, so here's an updated version of my answer:

First, I think you should switch to using ember-data. Then fetching an employee by id would just resolve to calling this.get("store").find("employee", id).

If you wish to use plain ajax, I suggest that you create a Service that encapsulates specifics (API endpoint URL, data format, and so on) and only exposes simple methods for finding and updating models.

And finally, to ply with the "data down, actions up" pattern, you shouldn't update the model in this ponent. Instead send an action to the parent controller/ponent. Like so:

app/ponents/employee-selector.js (the ponent you're writing):

export default Ember.Component.extend({
  actions: {
    updateId(id) {
      Ember.$.post("http://server.ip./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);
    }
  }
});

Old answer:

An idiomatic solution would be to do this in a Route.

First you should add a route in app/router.js:

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

Than define the route in 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./api/v1/getEmployee", { id: params.id }.then(
        (response) => { resolve(response) },
        reject
      );
    });
  }
});

(The only reason I wrapped everything in a new promise is to allow response customization - just replace resolve(response) with a code that transforms the raw response from the server and invoke resolve with this transformed version).

But if you'll have more munication with the API, and I suppose that you will, I suggest that you try using ember-data or any other data layer library for ember (probably Orbit).

Or at least write a service that abstracts away all munication with the API and use it anywhere you'd use raw ajax requests.

I was using Ember class directly in action so it looked like this

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

And other way to municate with BE is to use Ember Store (as you said) then in route you can get model from BE

example

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');
    }
});

There are several ways you can do this!

Firstly, Ember has a convient alias for jQuery: Ember.$. So, if you're familiar jQuery, this should be easy enough.

You can also use Ember's RSVP package. There's a good example here on how to make a request and do something with the response.

Thirdly, you can the ember-ajax service.

But what you're asking (update the model with the data from the ajax response) is already built into Ember Data. You'll need to map your API into what ember expects with an adapter and/or a serializer. Once your service is transformed into what Ember expects, you can query your server for a single record then save it.

本文标签： javascriptCorrect way to make an ajax call from EmberJs componentStack Overflow