ember.js - Ember-data transactions and resubmitting forms -

i'm using ember(+data) , have built simple signup form, i'm having trouble getting form (and ember-data transaction) work after server-side validation error.

i'm following https://github.com/dgeb/ember_data_example guide how use transactions, , works happy path, after server-side validation error, can't ember-data resubmit api request when click submit.

i did digging around, , think i'm missing step related resetting transaction after model becomes invalid or that...

github , app

you can try app , reproduce problem @ http://emb.herokuapp.com/

you can examine full source code @ https://github.com/justinfaulkner/ember-data-resubmit

repro

you can trigger fake server-side error completing form in app using e-mail address @ @example.com. rails api respond 422 , errors object keyed username/email field.

the field should highlighted in red error -- edit email address should valid, , click submit again. developer tools open in chrome, don't see ember-data sending http request click (but console.log in controller indicates click indeed being received).

what should happen

after modifying field error, ember-data (i think) changes model's invalid uncommitted gets submitted next time commit called. when click submit, ember-data should send http request api, , ember should transition "congrats!" page.

instead, however, form sits there. no http request. no transition "congrats!".

here's screenshot after clicked submit few (18) times after having updated inputs:

snippets

here snippets of ember app:

indexroute

my route, uses startediting ember_data_example does:

app.indexroute = ember.route.extend({   model: function() {     return null;   },   setupcontroller: function(controller) {     controller.startediting();   },   deactivate: function() {     this.controllerfor('index').stopediting();   } }); 

indexcontroller

my indexcontroller modeled after ember_data_example'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;     }   } }); 

user

here's model. i'm using 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

and here's form handlebars template. i'm using 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}} 

in case library authors see post, have made couple local modifications app's copy of ember-easyform , ember-validations in commit: https://github.com/justinfaulkner/dockyard-example/commit/f618b0e4fb72314d56bb3a9d95e1325925ba6ad0 . don't think changes causing problem, though.

becameinvalid , rollback?

i did run across similar-looking question here: ember data , dirty records when added user.becameinvalid rollback transaction, caused form empty when trying re-submit (and still no success having ember-data resubmit http request).

thanks!

i'm sure i'm following ember_data_example poorly (or failing extend use-case) or making simple mistake somewhere...

thanks in advance.

edit apr 5

so far, can find @ least 2 main problems:

1. this.transaction = null; need this? should instead?
2. i tried removing this.transaction = null; , ember-data tries commit (but still won't submit ajax request). now, when type in invalid field, can see ember-data try update record uncommitted/created... but in different transaction.

i pushed no-null branch repo has console.logs in ember-data prints out transaction id is... here's snapshot of console:

recordbecamedirty called when type in field. ember-data updates record ready committable again. but, it's doing in other transaction (458)

but submit button tied original transaction (316), , there's no records ready commit in transaction.... hmm....

this known issue ember data. see: https://github.com/emberjs/data/pull/539

the simple change in ember data in commit https://github.com/cyril-sf/data/commit/fe9c63beb02e9f16051e59a9f7c0a918152a0231 should solve problem.