【问题标题】:Ember - clear form after submittingEmber - 提交后清除表单
【发布时间】:2013-01-25 16:20:32
【问题描述】:

我使用 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() 这样会清空所有字段的内容吗?还是我的方法本质上是错误的,我应该完全不同吗?

【问题讨论】:

    标签: forms ember.js ember-data


    【解决方案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();
        }
      }
    });
    

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

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

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

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

    【讨论】:

    • 这也可以回滚可能存在的其他更改。您可能需要将记录放在单独的事务中..查看我的编辑..
    • Shimon,你的交易方式有点冗长,更新为更短的。
    • @AndreMalan 值得更新它以使用“停用”并删除交易代码。我认为最好是发表评论而不是为你完全重写它。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-13
    • 2016-03-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多