Ember - 提交后清除表单 [英] Ember - clear form after submitting

问题描述

我使用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（），这会清空所有字段吗？或者我的方法本质上是错误的，我应该完全不同吗？

我一直享受的模式是创建和破坏路线本身进出的物体。

  App.BandsNewRoute = Ember.Route.extend（{
模型：函数（params）{
返回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（）; 
} 
} 
}）; 
  

正如您所看到的，它使退出函数稍微复杂一些，但它恰好是每个对象创建路线都是一样的，所以你可以将它分解出来。现在你的模板可以直接绑定到模型的属性上，模型将在保存时保存，或者退出时退出（这将清除表单）。

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

  App.BandsNewRoute = Ember。 Route.extend（{
 model：function（params）{
 var transaction = this.get（'store'）。transaction（）; 
 return transaction.createRecord（App.Band，{ }）
} 
}）; 
  

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

I created very simple Ember app, using Ember Data. There is one form where the user creates the entity and submits. It's in BandsNewView (created automatically by Ember), controlled by 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');
    }
});

I wonder whether there is simplier solution to "clean up" (i.e empty) the form after saving new Band entity? Can I say something like this.set(), which would empty all the fields? Or is my approach essentially wrong and should I do it completely differently?

解决方案

The pattern that I've been enjoying is creating and destroying the object on enter and exit of the route itself.

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

As you can see, it makes the exit function a little more complex, but it will be exactly the same for every object creation route, so you can factor it out. Now your templates can just bind straight to the model's properties and the model will be saved on save, or rolled back on exit (which will clear the form)

If you are planning on possibly changing other data models and not saving them, or have unsaved models, a way to safely clear the model away is to put it in it's own transaction. I only tend to use this though for objects that are not the main focus of my current flow.

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

Everything else can stay the same.

这篇关于Ember - 提交后清除表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！