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();

然而，依靠用户点击＆＃34;取消＆＃34;可能是一个问题 - 如果他们使用后退按钮导航怎么办？根据我的经验，最好将表单绑定到模型对象的副本，这样您就可以轻松地丢弃更改。＆＃34;保存＆＃34;动作将从临时对象复制回路径的模型并保存。另外，请考虑服务器无法保存的含义。您应该then()打电话save()，因此您可以警告用户/恢复/回滚/等。

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

{{#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);
}

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

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

2 个答案: