Ember数据：更改组件中的模型数据并写回API

Question

我正在学习 ember.js，但无法理解编辑模型数据的工作原理。我有一个名为 singleitem:

的简单模型

export default Model.extend({
    test: DS.attr('string')
});

有一个模板 singleitem.hbs 使用包含此行的模板组件 interface_text.hbs：

<input type="text" value="{{singleitem.test}}" />

和相应的interface_text.js组件：

export default Component.extend({
    change() {
        console.log(this);
    }
});

每当我更改 <input> 标记的内容时，change() 方法都会触发，所以这有效。但是如何使用 <input> 的新值更新模型？

（我的最终目标是将更改的数据写回我的 API。使用 this.test.save(); 向我的 API 发起一个 PATCH 请求，但发回未更改的数据。所以我想我必须先更改模型。）

Answer 1

使用 two-way 输入绑定的最简单方法是使用 ember

提供的输入助手

为简化示例，假设您正在使用一个名为 test:

的属性组件

// template.hbs
{{input value=this.test}}

第二个最简单的方法是使用带有 HTML 输入标签的 mut 助手：

// template.hbs
<input type="text" value="{{this.test}}" oninput={{action (mut this.test) value="target.value"}}/>

您可以为该事件分配一个动作，而不是使用 mut 助手：

// template.hbs
<input type="text" value="{{this.test}}" oninput={{action "changed"}}/>

// component.js
actions: {
  changed(e) {
    this.set('test', e.target.value);
  }
}

无论如何，您需要学习一些重要的概念才能达到您的目标，因此我强烈建议您阅读 Ember 文档。有一个很棒的 tutorial 涵盖了您开始使用 Ember 所需的一切。

Ember数据：更改组件中的模型数据并写回API

Ember Data: Change model data in component and write it back to API

ember.js

ember-data