灰烬数据交易和重新提交表格

Question

我正在使用ember(+ data)并构建了一个简单的注册表单,但是在服务器端验证错误之后我无法使表单(和ember-data事务)正常工作.

我正在关注https://github.com/dgeb/ember_data_example作为如何使用事务的指南,它主要适用于Happy Path,但是在服务器端验证错误之后,我无法获得ember-data单击"提交"时重新提交API请求.

我做了一些挖掘,我认为我错过了一些与模型失效后重置事务有关的步骤......

Github和App

您可以在http://emb.herokuapp.com/上试用该应用并重现该问题

您还可以访问https://github.com/justinfaulkner/ember-data-resubmit查看完整的源代码.

摄制

您可以使用@ example.com上的电子邮件地址在我的应用程序中填写表单,从而触发虚假的服务器端错误.Rails API将响应422并将错误对象键入用户名/电子邮件字段.

该字段应以红色突出显示错误 - 将电子邮件地址编辑为应该有效的内容,然后再次单击"提交".在chrome中打开开发人员工具时,我看不到ember-data通过点击发送http请求(但控制器中的console.log表示确实正在接收点击).

应该怎么做

在使用错误修改字段后,ember-data(我认为)会将模型更改invalid为uncommitted以便在下次commit调用时提交它.当我单击Submit时,ember-data应该将HTTP请求发送到我的api,而ember应该转换为"Congrats!".页.

然而,相反,形式就在那里.没有http请求.没有过渡到"恭喜!".

这是我更新输入后点击提交几(18)次后的屏幕截图:

片段

以下是我的余烬应用程序的一些片段:

IndexRoute

我的路线使用startEditing类似于ember_data_example的做法:

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return null;
  },
  setupController: function(controller) {
    controller.startEditing();
  },
  deactivate: function() {
    this.controllerFor('index').stopEditing();
  }
});

的IndexController

我IndexController的模型是在ember_data_example之后建模的ContactsNewController

App.IndexController = Ember.ObjectController.extend({
  startEditing: function() {
    this.transaction = this.get('store').transaction();
    this.set('content', this.transaction.createRecord(App.User));
  },
  submit: function(user){
    console.log("submitting!");
    this.transaction.commit();
    this.transaction = null;
  },
  _transitionOnSuccess: function(stuff) {
    if (this.get('content.id') && this.get('content.id').length > 0) {
      console.log("_transitionOnSuccess");
      this.transitionToRoute('success');
    }
  }.observes('content.id'),
  stopEditing: function() {
    if (this.transaction) {
      this.transaction.rollback();
      this.transaction = null;
    }
  }
});

用户

这是我的模特.我正在使用ember-validations.

App.User = DS.Model.extend(Ember.Validations.Mixin);
App.User.reopen({
  username: DS.attr('string'),
  password: DS.attr('string'),
  profile: DS.belongsTo('App.Profile'),

  validations: {
      username: {
          presence: true
      },
      password: {
          presence: true,
          length: { minimum: 6 }
      }
  }
});

index.hbs

这是来自我的车把模板的表格.我正在使用ember-easyForm.

{{#formFor controller}}
    <div class="row">
        <div class="large-12 columns">
            {{input username placeholder="Email address"}}
        </div>

    </div>

    <div class="row">
        <div class="large-12 columns">
            {{input password placeholder="Password"}}
        </div>
    </div>

    {{submit "Sign Up" class="button"}}
{{/formFor}}

如果图书馆的作者看到这篇文章,我在这个提交中对应用程序的ember-easyForm和ember-validations副本进行了一些本地修改:https://github.com/justinfaulkner/dockyard-example/commit/f618b0e4fb72314d56bb3a9d95e1325925ba6ad0.不过,我不认为我的改变会导致我的问题.

becomeInvalid和rollback？

我在这里碰到了一个类似的问题:Ember数据和脏记录但是当我添加一个User.becameInvalid来回滚事务时,这导致表单在尝试重新提交时为空(并且仍然没有成功使用ember-data重新提交http请求).

谢谢!

我确定我ember_data_example跟不上(或者没有把它扩展到我的用例)或者在某处犯了一些简单的错误......

提前致谢.

编辑4月5日

到目前为止,我至少可以找到两个主要问题:

1. this.transaction = null;我需要这个吗？我该怎么做呢？
2. 我尝试删除this.transaction = null;和ember-data尝试现在实际提交(但仍然不会提交ajax请求).现在,当我输入无效字段时,我可以看到ember-data尝试将记录更新回uncommitted/ created... 但是它在不同的事务中执行.

我把一个no-null分支推到了一个包含console.logember-data 的repo,它打印出了事务ID的内容......这是我的控制台的快照:

recordBecameDirty在我输入字段时调用.Ember-data更新记录以准备再次提交.但是,它正在其他一些交易中进行(458)

但是我的提交按钮与原始交易相关联(316),并且没有准备好在该交易中提交的记录....嗯....

Answer 1

这是 ember 数据的一个已知问题。请参阅： https: //github.com/emberjs/data/pull/539

该提交https://github.com/Cyril-sf/data/commit/fe9c63beb02e9f16051e59a9f7c0a918152a0231中 Ember Data 的简单更改 应该可以解决您的问题。