我应该和如何在一个承诺的回调中transitionToRoute

Question

在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的范围。

我只写过，但我正在尝试学习核心概念和一些框架。这是使用承诺的正确方式吗？这是安博的过渡之地吗？

Answer 1

您的问题与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);
  }

现在，这段代码开始变得更加语义和可读性。

Answer 2

另一种解决方案是使用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");
        });
    }   
  }
});