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

对输入使用双向绑定的最简单方法是使用ember提供的输入帮助器

为简化示例，假设您正在使用一个名为test的组件：

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

第二种最简单的方法是将mut帮助程序与HTML输入标签一起使用：

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

您可以为该事件分配操作，而不是使用mut helper：

// 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所需的全部内容。

灰烬数据：更改组件中的模型数据并将其写回到API

1 个答案: