Question

只有当用户点击保存按钮并在用户取消操作时检索旧数据时，编辑表单以保存模型时是否有任何好的解决方案？

我已经看到了一些解决方案，比如复制与每个表单字段进行数据绑定的对象，并在保存时将初始对象设置为重复对象。

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

Answer 1

我知道您更喜欢不使用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();
  },

});

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

1 个答案: