使用 emberjs 编辑表单时的最佳实践答案

【问题标题】：Best practices when editing form with emberjs使用 emberjs 编辑表单时的最佳实践
【发布时间】：2014-07-21 16:27:25
【问题描述】：

在编辑表单以仅在用户单击保存按钮并在用户取消操作时检索旧数据时才保存模型时有什么好的解决方案吗？

我见过一些解决方案，例如复制与每个表单字段数据绑定的对象，并在保存时将初始对象设置为复制的对象。

如果您可以在不使用 ember 数据的情况下给出答案，那就太好了。

【问题讨论】：

标签： forms ember.js

【解决方案1】：

我知道您更喜欢不使用 ember-data 的解决方案，但我认为使用 ember-data 是最佳做法。这是一个使用 ember-data 的解决方案，因为我想很多人可能会遇到这个问题......

如果您按如下方式设置您的路线，它就会这样做。

App.CommentEditRoute = Em.Route.extend({

  model: function(params) {
    return this.store.find('comment', params.comment_id);
  },

  actions: {
    willTransition: function(transition) {
      var model = this.get('controller.content');

      if (model.get('isDirty')) {
        model.rollback();
      }
    }
  },

});

如果您在控制器中调用this.get('content').save()（因为用户单击了保存按钮），它将通过适配器保持更改并且isDirty 将设置为false。因此，模型不会回滚。否则，如果您没有在控制器中调用this.get('content').save()，则isDirty 属性将为true，并且未保存的更改将被丢弃。请参阅DS.Model docs 了解更多信息。

willTransition 是路由即将改变时自动调用的事件 - 您不必直接调用它。

您的控制器可能如下所示：

App.CommentEditController = Em.ObjectController.extend({

  save: function() {
    var _this = this;

    _this.get('content').save().then(function() {
      // Success
      _this.transitionToRoute('comments');
    }, function() {
      // Failure
      Em.assert('Uh oh!');      
    });
  },

  cancel: function() {
    this.transitionToRoute('comments');
  },

});

此外，请务必使用默认的 HTML 表单提交，使用适当的 HTML 按钮或输入进行提交，以便您可以在视图中捕获提交事件，如下所示：

App.CommentEditView = Em.View.extend({

  submit: function() {
    this.get('controller').save();
  },

});

【讨论】：

您的解决方案使用了 ember-data。修明确要求answers without using ember data
修说“可能很棒”，没必要。我认为使用 ember-data 是问题所要求的最佳实践。我编辑了我的答案以使其更清楚。
确实，我更喜欢使用 ember 数据，但事实是我目前正在从事的项目没有实现 ember-data :( ！无论如何，如果我们迁移到 ember-data，我会让你回答;)。如我所见，您正在使用路由器，但我正在编辑的表单未链接到任何路由器。实际上，路线看起来是这样的：mywebsite.com/template 此页面包含多个表单，也没有链接到任何路线。我该如何管理您的解决方案，这次您能否在不使用 ember-data 的情况下给出答案