使用Ember. js进行手动表单数据保存的正确方法是什么？

提问者：小点点

使用Ember. js进行手动表单数据保存的正确方法是什么？

我正在尝试在Ember. js中创建一个具有中等数量字段（假设20个）的手动保存表单（不使用实时绑定），到目前为止，我对这样做的正确方式/最佳实践感到困惑。我发现了以下方法：

http://www.solitr.com/blog/2012/06/ember-input-field-with-save-button/

如何在emberjs上使用单向绑定？

https://stackoverflow.com/a/16473186/1248965

上述所有方法在一定程度上看起来都很老套；它们要么扩展文本字段，要么使用每个字段的观察者，要求您列出每个字段。还有其他方法吗？类似于“未绑定”助手，但允许自动模型更新某些操作的魔法/验证（通过enber-data）（如“未绑定直到”或“条件绑定”之类的）？我已经浏览了所有文档、SO、github问题、Ember论坛和上面的链接，仍然觉得我一定错过了什么。

基本上，一种说法是“使用正常绑定的表单/字段执行您将执行的所有操作，但仅限于某个操作，而不是实时执行。”

共2个答案

匿名用户

您想要的是一个“缓冲代理”，您可以在代理对象中临时存储对模型的所有更改（您可以使用setUnkown Property捕获这些更改）。一旦您对更改感到满意，您就可以将所有代理数据复制到实际对象中（“刷新数据”）。

App.Heisenberg = {
  firstName: 'Walter',
  lastName: 'White',  
};

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return App.Heisenberg;
  },
  setupController: function(controller, model) {
    controller.set('content', model);
  }
});

App.IndexController = Ember.ObjectController.extend({
  proxy: {},
  setUnknownProperty: function(key, value) {
    console.log("Set the unknown property: " + key + " to: " + value); 
    this.proxy[key] = value;
    console.log(this.proxy);
  },
  flush: function() {
    for(var key in this.proxy) 
      this.set('model.'+key, this.proxy[key]);
  }
});

模板：

<script type="text/x-handlebars" data-template-name="index">
    Saved Name: {{firstName}} {{lastName}}<br />
    <br />

    <form {{ action "saveEdit" on="submit" }}>
        First Name: {{input type="text" valueBinding="firstName"}}<br />
        Last Name: {{input type="text" valueBinding="lastName"}}<br />
        <br />
        <button {{ action "flush" }}>Flush</button>
    </form>
</script>

这将使一个不错的控制器Misin。

有关实时示例，请参阅此jsBin。

匿名用户

我找到了一个变通方法，但我不是100%满意：

在我的“编辑”模板中，我有：

<form {{ action "saveEdit" on="submit" }}>
  Title: {{input type="text" value=title}}
  <input type="submit" value="Save">
  <button {{ action "cancelEdit" }}>Cancel</button>
</form>

然后在我的关联控制器中，我这样做：

cancelEdit: function() {

  var entry = this.get('model');

  this.set('isEditing', false);
  entry.rollback();

},

saveEdit: function() {

  var entry = this.get('model');

  this.set('isEditing', false);
  entry.save().then(

    function() {

    console.log('Saved!');

   }

我只是隐藏了“实时更新”将显示的字段。我仍然希望找到一种方法来暂时关闭绑定，直到我触发我的“saveEdit”操作，因为这似乎仍然不优雅。