Ember 模型回滚将视图重置为之前的状态

Question

我有一个简单的表单（包含绑定到模型的一些文本字段和复选框），它可以使用 jQuery 的 slideToggle 显示或隐藏。

此表单有两个按钮：保存和取消。

基本上，当我需要对模型进行一些更改时，此表单会变得可见。单击保存按钮时，我会保存模型

this.get('model.content').save();

并隐藏表单。

取消也是如此。我试着打电话

this.get('model.content').rollback();

但它不会还原文本字段，也不会重置复选框。当我下次打开表单时，我希望它们处于以前的“未保存”状态。我该怎么做？

Answer 1

在您的 Ember 2.10 组件中，添加：

  willDestroyElement() {
    this._super(...arguments);
    this.get('model').rollbackAttributes();
  }

这将在表单组件从 DOM 中删除之前重置模型未保存的更改。当用户离开您的表单而不保存时，这尤其有用。然后，您将希望阻止所做的更改通过您的应用程序传播。这假设您将模型属性传递到输入字段，如下所示：

 {{input value=model.name}}

http://emberjs.com/api/data/classes/DS.Model.html#method_rollback http://emberjs.com/api/classes/Ember.Component.html#method_willDestroy

Answer 2

你应该回滚模型：

this.get('model').rollback();

但是，依靠用户单击“取消”可能会出现问题 - 如果他们使用后退按钮导航会怎样？根据我的经验，最好将表单绑定到模型对象的副本，这样您就可以轻松地丢弃更改。 “保存”操作将从临时对象复制回路线模型并保存。另外，请考虑服务器未能保存的影响。您可能应该在致电save() 时使用then()，这样您就可以警告用户/恢复/回滚等。

您可以将每个属性复制到“缓冲区”属性并在表单模板中执行以下操作：

{{#with buffer}}
    {{input value=fieldOne}}
    {{input value=fieldTwo}}
{{/with}}

要在模型对象上创建 attributes 计算属性，请添加：

attributes: function() {
    var model = this,
        result = [];
    Ember.keys(this.get('data')).forEach(function(key) {
        result.push(Ember.Object.create({
            model: model,
            key: key,
            valueBinding: 'model.' + key
        }));
    });
    return result;
}.property()

然后，要创建一个临时缓冲区供您的表单使用，您可以在控制器上执行此操作：

setupController: function(controller, model) {
    var buffer={};
    controller.set('model', model);
    model.get('attributes').forEach(function(item) {
        buffer[item.get('key')]= item.get('value');
    });
    controller.set('buffer', buffer);
    this._super(controller, model);
}

我个人将它们用作Mixins，因此我可以轻松地将它们添加到我的所有模型对象并编辑控制器。