我应该以及如何在 promise 回调中转换 transitionToRoute
Should I and how to transitionToRoute in a promise callback
在 Ember 控制器中,我想调用我的 API 来创建用户,成功后,transitionToRoute。这是我目前想要工作的:
import ajax from "ic-ajax";
import Ember from "ember";
export default Ember.Controller.extend({
actions: {
createAndLoginUser: function() {
var user = { "user": this.getProperties("email", "name") };
ajax({ url: "api/users", type: "POST", data: user })
.then(transitionToHome);
}
}
});
var transitionToHome = function() {
this.transitionToRoute("home")
}
但是当我在方法中放置一个 debugger
时,this
不再是控制器对象并且超出了调用 transitionToRoute
的范围。
我只写过 hacky javascript,但我正在努力学习核心概念和一些框架。这是使用承诺的正确方法吗?这是 Ember 中放置过渡的正确位置吗?
您的问题与Ember或转换无关;这都是关于 this
处理。最简单的解决方案就是
.then(transitionToHome.bind(this));
将转换方法放入控制器中
您也可以考虑将 transitionToHome
作为一种方法放入控制器中。然后,你可以像下面这样调用它:
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
和使用 bind
(但确实需要使用 self
)。
将转换移动到路线?
在你的问题范围之外,但有人会说与路由相关的逻辑(包括转换)在逻辑上属于路由,而不是控制器。如果你同意,你可以重构上面的代码来做一个 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"); });
}
}
然后在您的路线中实施 goHome
操作。或者,您可以在更高级别的路由中实现 goHome
,甚至是应用程序路由,从而使其可从任何控制器或较低级别的路由中使用。
将 AJAX 逻辑移动到服务?
其他人可能会说 ajax 逻辑并不真正属于控制器,而应该属于服务层,所以
// 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"); });
}
};
使用ES6语法,我们可以避免self
,简化一点过程:
createAndLoginUser: function() {
var data = this.getProperties("email", "name"));
var goHome = () => this.send("goHome");
createUser(data) . then(goHome);
}
现在这段代码开始看起来更具语义性和可读性。
另一种解决方案是简单地使用 ES6 箭头语法来维护 this
:
的上下文
import ajax from "ic-ajax";
import Ember from "ember";
export default Ember.Controller.extend({
actions: {
createAndLoginUser() {
let user = { "user": this.getProperties("email", "name") };
ajax({ url: "api/users", type: "POST", data: user })
.then(() => {
this.transitionToRoute("home");
});
}
}
});
在 Ember 控制器中,我想调用我的 API 来创建用户,成功后,transitionToRoute。这是我目前想要工作的:
import ajax from "ic-ajax";
import Ember from "ember";
export default Ember.Controller.extend({
actions: {
createAndLoginUser: function() {
var user = { "user": this.getProperties("email", "name") };
ajax({ url: "api/users", type: "POST", data: user })
.then(transitionToHome);
}
}
});
var transitionToHome = function() {
this.transitionToRoute("home")
}
但是当我在方法中放置一个 debugger
时,this
不再是控制器对象并且超出了调用 transitionToRoute
的范围。
我只写过 hacky javascript,但我正在努力学习核心概念和一些框架。这是使用承诺的正确方法吗?这是 Ember 中放置过渡的正确位置吗?
您的问题与Ember或转换无关;这都是关于 this
处理。最简单的解决方案就是
.then(transitionToHome.bind(this));
将转换方法放入控制器中
您也可以考虑将 transitionToHome
作为一种方法放入控制器中。然后,你可以像下面这样调用它:
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
和使用 bind
(但确实需要使用 self
)。
将转换移动到路线?
在你的问题范围之外,但有人会说与路由相关的逻辑(包括转换)在逻辑上属于路由,而不是控制器。如果你同意,你可以重构上面的代码来做一个 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"); });
}
}
然后在您的路线中实施 goHome
操作。或者,您可以在更高级别的路由中实现 goHome
,甚至是应用程序路由,从而使其可从任何控制器或较低级别的路由中使用。
将 AJAX 逻辑移动到服务?
其他人可能会说 ajax 逻辑并不真正属于控制器,而应该属于服务层,所以
// 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"); });
}
};
使用ES6语法,我们可以避免self
,简化一点过程:
createAndLoginUser: function() {
var data = this.getProperties("email", "name"));
var goHome = () => this.send("goHome");
createUser(data) . then(goHome);
}
现在这段代码开始看起来更具语义性和可读性。
另一种解决方案是简单地使用 ES6 箭头语法来维护 this
:
import ajax from "ic-ajax";
import Ember from "ember";
export default Ember.Controller.extend({
actions: {
createAndLoginUser() {
let user = { "user": this.getProperties("email", "name") };
ajax({ url: "api/users", type: "POST", data: user })
.then(() => {
this.transitionToRoute("home");
});
}
}
});