Ember.JS Best Practice: Model vs Controller field binding

Question

I am looking best practices in Ember.JS to fix the following scenario:

1. The user clicks on the challenges link.
2. The system displays the list of challenges.
3. The user clicks on edit challenge button.
4. The system displays the edit challenge form.
5. The user updates the challenge name.
6. The user clicks on the leagues link without saving the challenge.
7. The system displays the list of leagues.
8. The user clicks on the challenges link.
9. The system displays the list of challenges with the updated challenge name.

This issue is occurring because all my text field are binded directly to the challenge model and since the model is updated as soon as you type it updates the text on all the routes. I have a cancel button on the edit form where I do this.get('model').rollback() on the model to cancel out the edits. However this gets messy if you start doing rollback in different place on the page you can click.

The way I was thinking about fixing this issue is to have the form field binded to the controller properties and on each route copy the model properties to the controller properties on the setupController hook. This would prevent edits to impact the other routes.

I am wondering if this best practice in ember or is there a better way to fix this issue?

Thank you

Answer 1

You can use single rollback in deactivate route hook. Then on cancel action you can do transition only.

// edit challenge route
model(params) {
  ...
},

deactivate() {
  this.modelFor( this.get('routeName')).rollback();
}

PS Are you aware that rollback() still doesn't work properly with relations and reduced to rollbackAttributes() in ED 2.0?

Related links: https://github.com/emberjs/data/issues/2122 https://github.com/emberjs/data/issues/3273#issuecomment-110965145