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

原文由 DeividKamui 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 请求的任何地方使用它。

原文由 edziubudzik 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有几种方法可以做到这一点！

首先，Ember 有一个方便的 jQuery 别名： Ember.$ 。所以，如果您熟悉 jQuery，这应该很容易。

您还可以使用 Ember 的 RSVP 包。这里有一个 很好的例子，说明如何发出请求并对响应做些什么。

第三，您可以使用 ember-ajax 服务。

但是您要问的（使用来自 ajax 响应的数据更新模型）已经内置到 Ember Data 中。您需要将您的 API 映射到 ember 对适配器和/或序列化器的期望。一旦您的服务转换为 Ember 所期望的，您就可以 查询您的服务器以获取单个记录，然后保存它。

原文由 Rimian 发布，翻译遵循 CC BY-SA 3.0 许可协议