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

Question

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

我跟随https://github.com/dgeb/ember_data_example作为如何使用交易的指南，它主要适用于快乐路径，但在服务器端验证错误后，我无法获得单击“提交”时重新提交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应该转换到＆＃34; Congrats！＆＃34;页。

然而，形式只是坐在那里。没有http请求。没有过渡到＃34;恭喜！＆＃34;。

这是我更新输入后点击提交几（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＆＃39; s 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。但是，我不认为我的更改会导致我的问题。

变为无效并回滚？

我在这里遇到了一个类似的问题：Ember Data and dirty records但是当我添加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.log个ember数据的仓库中，该数据打印出交易ID的内容...这里＆＃39 ;我控制台的快照：



当我输入字段时，会调用

recordBecameDirty。 Ember-data更新记录以准备再次提交。但是，它正在其他一些交易中进行（458）

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

Answer 1

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

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