Question

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

以上所有方法在某种程度上看起来都很糟糕;它们要么扩展文本字段，要么使用每个字段的观察者，要求您列出每个字段。还有其他方法吗？像“未绑定”的助手，但允许自动模型更新魔术/验证（通过ember-data）进行某些操作（如'unbound-until'或'conditional-bind'或其他东西）？我已经浏览了所有文档，SO，github问题，Ember论坛以及上面的链接，但仍然觉得我一定错过了什么。

基本上，有一种方式可以说“用通常约束的形式/字段做你应该做的一切，但只做某个动作，而不是实时。”

Answer 1

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

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>

这将成为一个不错的控制器Mixin。

有关实例，请参阅this jsBin。

Answer 2

我找到了一种解决方法，但我并不是百分之百满意：

在我的编辑＆＃34;模板，我有：

<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!');

   }

我只是隐藏＆＃34;实时更新的字段＆＃34;会表现出来。我仍然想找到一种暂时关闭绑定的方法，直到我触发我的＆＃34; saveEdit＆＃34;行动，因为这似乎仍然不够优雅。

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

2 个答案: