从EmberJs组件进行ajax调用的正确方法？

Question

我想知道从ember组件进行ajax调用的正确方法是什么.例如

我想创建一个可重用的组件,使员工按员工ID进行搜索,然后当响应从服务器返回时,我想用ajax响应中的数据更新模型.

我不知道这是否是正确的方法,我在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

编辑：我误解了这个问题，所以这是我答案的更新版本：

首先，我认为你应该改用 ember-data。然后通过 id 获取员工只会解析为调用this.get("store").find("employee", id).

如果您希望使用普通的 ajax，我建议您创建一个封装细节（API 端点 URL、数据格式等）的服务，并且仅公开用于查找和更新模型的简单方法。

最后，为了遵守“数据向下，操作向上”模式，您不应更新此组件中的模型。相反，将操作发送到父控制器/组件。就像这样：

app/components/employee-selector.js（您正在编写的组件）：

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

旧答案：

惯用的解决方案是在Route.

首先，您应该在以下位置添加一条路线app/router.js：

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

比定义路线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
      );
    });
  }
});

（我将所有内容包装在新承诺中的唯一原因是允许响应自定义 - 只需替换resolve(response)为转换来自服务器的原始响应的代码并resolve使用此转换后的版本进行调用）。

但是，如果您需要与 API 进行更多通信（我想您会的），我建议您尝试使用 ember-data 或任何其他 ember 数据层库（可能是 Orbit）。

或者至少编写一个服务，抽象出与 API 的所有通信，并在任何使用原始 ajax 请求的地方使用它。