在 EmberJS 中向外部 API 发出 PUT 请求的推荐方法是什么?

What is the recommended way to make a PUT request to an external API in EmberJS?

我有一个简单的应用程序,它从外部 API 检索记录并显示值 ("day")。可以通过一个简单的操作将日期值传递到组件中来增加日期值。我的应用程序正在正确检索记录并将其成功传递给组件。但是一旦它增加了价值,我就无法找到将记录 save 返回到外部 API.

的最佳方法

我的 route 像这样获取对象:

export default Route.extend({
  model() {
    return this.get('store').findRecord('world', '5cb0f8bd3b74cf22b75e1a37', { reload: true });
  },
})

这是我的 model:

import Model from 'ember-data/model';
import DS from 'ember-data';

const { attr } = DS;

export default Model.extend({
  day: attr('Number'),
});

在我的模板中,日期值映射到我的组件:

<Wait @day={{model.day}}></Wait>

我的组件有一个按钮可以调用这样的操作:

<button {{action "incrementDay"}} class="btn btn-default" aria-hidden="true">Wait</button>

最后,这是我的 component:

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Component.extend({
  router: service(),
  store: Ember.inject.service(),
  actions: {
    incrementDay() {
      this.day++;
      console.log(this.day);
    }
  }
});

每次按下按钮,控制台都会成功输出递增的数字,但我不确定如何将更改保存回 API。使用更改后的数据向 API 发出 PUT 请求的最佳方法是什么?

您可能希望将整个模型传递给您的组件。像这样:

<Wait @someBetterName={{@model}} />

(顺便说一句,您可能希望您的模型是事物的哈希值,这样您就可以为事物使用更规范的名称)

async model() {
  let myModelA = await this.store...
  // ...
  return {
    modelA: myModelA,
    modelB: myModelB,

  }
}

但是在 Wait 中,你可以让你的 action 这样做:

  actions:{
    async incrementDay() {
      let day = this.someBetterName.day;
      this.someBetterName.set('day', day + 1);

      await this.someBetterName.save();
      console.log('saved!')
    }
  }