Ember-forms doesnt update binding, keeps using the old record

[BenjaminHorn]

I have a form bound to a book record. After i saved i want to "null out" the rcord, so i create a new one , but ember-forms keeps using the old one. Is it he normal behaviour? Or there is a better way to do it?

Here is a JsBin: http://jsbin.com/pexolude/48/edit and the stackoveflow link with solution: http://stackoverflow.com/questions/24194731/emberjs-save-record-mockjax/

[asaf]

The form is bound to your model, you have to replace the model with an empty one manually, then it should re-render the form controls with empty values.

[BenjaminHorn]

Could you please assist me on this? After the save succeeded i try to change the model bounded to the form to a new empty record.

    some_action: function() {
      var self = this;
      // save my record bound to the form
      this.get("model").book.save().then(
        // on success
        function() {
          // create a new record for the form by hand  <-- doesnt work
          self.set("model.book",self.store.createRecord('book'));
          console.log('success');
        },
        function(){
          console.log('fail');
        }
      );
      $('form').find("input, textarea, select").val("");

    }

Here is the Bin: http://jsbin.com/pexolude/51/edit

[asaf]

@BenjaminHorn

Did you try with real data instead of the mockjax ?

I can clearly see that the model resets when u set a new model and all input get empty but then the data returns back with the content of 'book'.

[BenjaminHorn]

@asaf

Did you try with real data instead of the mockjax ?

TBH not yet.

I can clearly see that the model resets when u set a new model and all input get empty but then the data returns back with the content of 'book'."

I think the form clears bc of this line. If i comment this out, there is no clearing:

$('form').find("input, textarea, select").val("");

I made some console.log to see better whats going on:

Before saving the record. It is new, has no id Class {id: null,...}

record.save() happens, POST to mockjax MOCK POST: /books Object {url: "/books", type: "POST", …}

we are in the success branch, book returned from "server" , form's properites updated befor reset Class {id: "4"…}

new record has benn created -- form still shows the old record after reset Class {id: null, …}

updated jsbin:

http://jsbin.com/pexolude/57

[BenjaminHorn]

@asaf

Today i made a try with real data instead of mockjax. I used a RESTApi, and i experienced the very same behaviour as in JsBin (see previous comment). The new items shows in the list, but still bounded to the form. It looks like

self.set("model.book",self.store.createRecord('book'));

makes a new record, but the form's model ignores this.

Could you confirm this is a bug, or am i missing something?

[michetti]

Hey @asaf @BenjaminHorn, I'm experiencing the exact same behaviour, trying to reuse a form by setting a new model to it.

I have an em-form bound to a controller attribute. After submitting, I replace this controller attribute with a new model, created using the store, but the form does not re-render with the new model, as it still shows the previous model values on the inputs.

Ember: 1.6.1 Ember Data: 1.0.0-beta.8.2a68c63a Ember Forms : 0.0.2

And I'm using EmberFire (Firebase), but I don't think it is related to the problem: EmberFire : 1.0.9

I can provide more detail if needed... Will also try to take a look at the code, to see if I can help.

[asaf]

@michetti Okay, thanks, I will put more effort into this issue

[BenjaminHorn]

@asaf @michetti

I edited in in_form_mixin.coffee

    model: (->
        @get('form.model')
    ).property('form')

to

    model: (->
        @get('form.model')
    ).property('form', 'form.model')

With this modification the form will know if the underlying model has been updated. You can find this in the distributed version around the line 142. (Ember.Forms.InFormMixin)

here is the updated JsBin: http://jsbin.com/pexolude/174/edit

[michetti]

@BenjaminHorn, yes, this change seems to fix the issue for me.

The only thing missing is that after the model is replaced, the form displays validation errors.

Looking on the source code, there is a canShowErrors property on form_group.coffee: https://github.com/indexiatech/ember-forms/blob/master/src/form_group.coffee#L76

and it is not reseted after the model changes, so I added an observer to it, and this seems to also fix the validations error:

  canShowErrorsObserver: function() {
    this.set('canShowErrors', false);
  }.observes('form', 'form.model')

here is a clone of your jsBin with this change: http://jsbin.com/pemenevu/2/edit

@asaf, let us know if these changes seems correct to you? Maybe we can put together a Pull Request?

[xcskier56]

This perfectly solved my issues when replacing the model. What is the status on this? A pull request would be great.

[chbonser]

This also solves my issue. I'm also interested to know the status of a PR. Any news?

[asaf]

PR #92 merged.