EmberJS making HTTP Post request to Rails API server using ember-ajax

Question

So I have a Rails API and an Ember application. At the moment, my Ember has a login.hbs template and a login.js controller.

I have done a ember install ember-ajax ( https://github.com/ember-cli/ember-ajax ).

On entering an email and password, I click on the login button which calls my login.js action loginClicked()

I have the following in my login controller:

// login.js controller
import Ember from 'ember';

export default Ember.Controller.extend({
  email: '',
  password: '',

  actions: {
    loginClicked() {
      // alert("email: " + this.get('email') + "\npassword: " + this.get('password'));

      let params = {
        email: this.get('email'),
        password: this.get('password')
      };

      post('/authenticate', {
        params: params
      });
    }
  }
});

In my login.js route handler, I have injected the ember-ajax service:

// login.js route handler
import Ember from 'ember';

export default Ember.Route.extend({
  ajax: Ember.inject.service()
});

The problem is, my Mac terminal console is outputting an error saying:

controllers/login.js: line 16, col 7, 'post' is not defined.

I have also tried injecting the ember-ajax service into my controller but it made no difference.

Am I doing something wrong ?

Answer 1

Everything is described into the ember-ajax github page https://github.com/ember-cli/ember-ajax

export default Ember.Controller.extend({
  ajax: Ember.inject.service(),

  actions: {
    loginClicked() {
      let params = {
        email: this.get('email'),
        password: this.get('password')
      };

      return this.get('ajax').request('/authenticate', {
        method: 'POST',
        data: params
      });
    }
  }
});

Basically, to access any property of your controller (component, ...) in ember, you need to get it using this.get('propertyName'). Here you need to use the request method of the ajax property (the injected service).