从EmberJs组件调用ajax的正确方法？ [英] Correct way to make an ajax call from EmberJs component?

问题描述

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

I would like to know what is the correct way to make an ajax call from an ember component. for example

我想创建一个可重复使用的组件，使员工根据员工ID进行搜索，然后当服务器返回响应时，我想使用来自ajax响应的数据。

I want to create a reusable component that makes an employee search by employee's Id, then when the response comes back from the server I want to update the model with the data from the ajax response.

我不知道这是否是正确的方法，我真的是新的emberjs。

I don´t know if this is the correct way to do it, I'm really new on 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();
        });
    }
}});

推荐答案

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

I misunderstood the question, so here's an updated version of my answer:

首先，我想你应该切换到使用ember数据。然后，通过id获取一个员工只需要调用 this.get（store）。find（employee，id）。

First, I think you should switch to using ember-data. Then fetching an employee by id would just resolve to calling this.get("store").find("employee", id).

如果你想使用plain ajax，我建议你创建一个服务封装了详细信息（API端点URL，数据格式等），并且仅公开了查找和更新模型的简单方法。

If you wish to use plain ajax, I suggest that you create a Service that encapsulates specifics (API endpoint URL, data format, and so on) and only exposes simple methods for finding and updating models.

最后，要遵守数据下降，动作向上模式，您不应该更新此组件中的模型。而是将操作发送到父控制器/组件。像这样：

And finally, to comply with the "data down, actions up" pattern, you shouldn't update the model in this component. Instead send an action to the parent controller/component. Like so:

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

app/components/employee-selector.js (the component you're writing):

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 中执行此操作。

An idiomatic solution would be to do this in a Route.

首先，您应该在 app / router.js 中添加路线：

First you should add a route in 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） code>解决与这个转换版本）。

(The only reason I wrapped everything in a new promise is to allow response customization - just replace resolve(response) with a code that transforms the raw response from the server and invoke resolve with this transformed version).

但是如果你有更多的API与API的沟通，而且我想你会的，我建议你尝试使用ember数据或任何其他的数据层库（可能是Orbit）。

But if you'll have more communication with the API, and I suppose that you will, I suggest that you try using ember-data or any other data layer library for ember (probably Orbit).

或至少写一个摘要的服务将所有与API进行通信，并将其用于使用原始ajax请求的任何位置。

Or at least write a service that abstracts away all communication with the API and use it anywhere you'd use raw ajax requests.

这篇关于从EmberJs组件调用ajax的正确方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！