Your issue is not related to Ember or transitions; it's all about how you handle 'this'. The easiest solution is:
.then(transitionToHome.bind(this));
Placing transition method in the controller
You could also opt to place 'transitionToHome' inside the controller as a method. Then, you can call it like this:
export default Ember.Controller.extend({
transitionToHome: function() { this.transitionToRoute("home"); },
actions: {
createAndLoginUser: function() {
var self = this;
var user = { "user": this.getProperties("email", "name") };
ajax({ url: "api/users", type: "POST", data: user })
.then(function() { self.transitionToHome(); });
}
}
});
This approach may be simpler, more readable, and eliminates the need to deal with 'this' and using 'bind' (though it requires the use of 'self').
Considering moving the transition to the route?
Although beyond your current question, some argue that route-related operations (including transitions) should logically reside in the route instead of the controller. If you agree with this view, you could restructure the code by utilizing 'send':
createAndLoginUser: function() {
var user = { "user": this.getProperties("email", "name") };
var self = this;
ajax({ url: "api/users", type: "POST", data: user })
.then(function() { self.send("goHome"); });
}
}
You can then implement the 'goHome' action in your route. Alternatively, you can define 'goHome' in a higher-level route, potentially even the application route, making it accessible from any controller or lower-level route.
Considering moving the AJAX logic to a service?
Some argue that the AJAX logic doesn't belong in the controller and should be housed in a services layer. In this case, it might look something like this:
// services/user.js
export function createUser(data) {
return ajax({ url: "api/users", type: "POST", data: { user: data } });
}
// controller
import { createUser } from 'app/services/user';
export default Ember.Controller.extend({
createAndLoginUser: function() {
var data = this.getProperties("email", "name"));
var self = this;
createUser(data).then(function() { self.send("goHome"); });
}
};
Utilizing ES6 syntax allows us to remove the need for 'self,' making the code a bit cleaner:
createAndLoginUser: function() {
var data = this.getProperties("email", "name"));
var goHome = () => this.send("goHome");
createUser(data).then(goHome);
}
With these changes, the code becomes more coherent and easier to understand.