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

Posted 2021-05-06

我想知道从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();
        });
    }
}});

答案

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

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

如果你想使用普通的ajax，我建议你创建一个封装特定内容的Service（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）。

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

另一答案

我直接在行动中使用Ember类，所以它看起来像这样

actions: {
  doSomething() {
    Ember.$.post('http://your-api-endpoint', data).then(function(response){ /* your callback code */});  
  }
}

和BE沟通的其他方式是使用Ember Store（如你所说），然后在路线中你可以从BE获得模型

例

App.PressRoute = Ember.Route.extend({
    route: "press",
    controllerName: 'press',
    model: function(params) {
        var controller = this.controllerFor("Press");

        if(controller.get("loaded") == false) {
            controller.set("loaded",true);
            return this.store.find('Article',{limit: 200});
        }
        else return this.store.all('Article');
    }, 
    renderTemplate: function() {
        this.render('press');
    }
});

另一答案

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

首先，Ember有一个方便的qazxsw poi for jQuery：qazxsw poi。所以，如果你熟悉jQuery，这应该很容易。

您也可以使用Ember的alias包。关于如何提出请求并对响应采取措施，有一个Ember.$。

第三，你可以RSVP服务。

但是你要问的是（用ajax响应中的数据更新模型）已经内置到Ember Data中。您需要将API映射到ember期望的适配器和/或序列化程序。一旦您的服务转变为Ember所期望的，您可以good example here然后保存它。