javascript - 从 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，我建议你创建一个 Service它封装了细节(API 端点 URL、数据格式等)，并且只公开了用于查找和更新模型的简单方法。

最后，为了遵守“数据向下，操作向上”模式，您不应更新此组件中的模型。而是向父 Controller /组件发送一个 Action 。像这样:

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

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

但是如果您将与 API 有更多的交流，我想您会的，我建议您尝试使用 ember-data 或任何其他用于 ember 的数据层库(可能是 Orbit)。

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