forms - Ember - 提交后清晰的表格

Question

我使用 Ember Data 创建了非常简单的 Ember 应用程序。有一种表单供用户创建实体并提交。它位于 BandsNewView 中(由 Ember 自动创建)，由 BandsNewController 控制:

App.BandsNewController = Ember.Controller.extend({
    cancel: function() {
        this.transitionTo('bands');
    },

    save: function() {
        App.Band.createRecord(this);
        this.get('store').commit();

        this.set('name');
        this.set('description');
        this.transitionTo('bands');
    }
});

我想知道保存新的 Band 实体后是否有更简单的解决方案来“清理”(即清空)表单？我可以说类似 this.set() 的内容吗？它会清空所有字段？或者我的方法本质上是错误的，我应该采取完全不同的方式吗？

Answer 1

我一直喜欢的模式是在路线本身的进入和退出时创建和销毁对象。

App.BandsNewRoute = Ember.Route.extend({
  model: function(params) {
    return App.Band.createRecord({});
  },
  save: function() {
    this.get('currentModel.store').commit();
    return this.transitionTo('bands');
  },
  exit: function() {
    var model = this.get('currentModel');
    if (model.get("isNew") && !model.get("isSaving")) {
      return model.get('transaction').rollback();
    }
  }
});

正如您所看到的，它使退出函数变得更加复杂，但对于每个对象创建路径来说它都是完全相同的，因此您可以将其分解出来。现在，您的模板可以直接绑定(bind)到模型的属性，并且模型将在保存时保存，或在退出时回滚(这将清除表单)

如果您计划可能更改其他数据模型而不保存它们，或者有未保存的模型，则安全清除模型的一种方法是将其放入其自己的事务中。不过，我只倾向于将其用于不是当前流程主要焦点的对象。

App.BandsNewRoute = Ember.Route.extend({
  model: function(params) {
    var transaction = this.get('store').transaction();
    return transaction.createRecord(App.Band, {})
  }
});

其他一切都可以保持不变。