Correct way to make ajax call from EmberJs component?

Question

I would like to know what is the correct way to make an ajax call from an ember element. eg

I want to create a reusable component that makes the employee search an employee identifier, and then when the response comes back from the server, I want to update the model with the data from the ajax response.

I do not know whether to do this correctly, I am really new to 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(); }); } }}); 

Answer 1

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

Firstly, I think you should switch to using ember data. Then fetching an employee by id will simply allow this.get("store").find("employee", id) called.

If you want to use simple ajax, I suggest creating a service that encapsulates the specifics (API endpoint URL, data format, etc.) and provides only simple methods for finding and updating models.

And finally, to match the “data down, action up” pattern, you should not update the model in this component. Instead, submit the action to the parent controller / component. For instance:

app/components/employee-selector.js (the component you are writing):

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

Old answer:

An idiomatic solution would be to do this in Route .

First you must add the route to app/router.js :

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

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

(The only reason I wrapped everything in the new promise is to allow the response to be configured - just replace resolve(response) code that converts the raw response from the server and calls resolve with this converted version).

But if you have more communication with the API, and I believe that you will, I suggest you try using ember-data or any other data layer library for ember (possibly Orbit).

Or at the very least, write a service that abstracts all communication with the API and uses it wherever you use raw ajax requests.

Answer 2

I used the Ember class directly in action to make it look like this:

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

And another way to contact BE is to use the Ember Store (as you said), and then along the route you can get a 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'); } }); 

Answer 3

There are several ways to do this!

First, Ember has a conditional alias for jQuery: Ember.$ . So, if you are familiar with jQuery, this should be easy.

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

Thirdly, you can ember-ajax service.

But what you request (update the model with the data from the ajax response) is already built into Ember Data. You will need to map your API to what ember expects with an adapter and / or serializer. Once your service has been converted to what Ember expects, you can query your server for one record and then save it.