Emberjs: Prevent changes propagation throughout a transaction

Question

I have a scenario where I list products in a page and allow users to edit products' properties only in a modal window.

When a user clicks on the product and start editing the product's properties, changes gets propagated right away to the product in the product list page and any part of page bound directly or indirectly to the property undergoing the changes. Not the desired behaviour. Changes should be propagated only when the user confirms the changes i.e save button clicked, transaction committed and modal window closed

transaction: APP.store.transaction(),

renderTemplate:function(controller, record) {
    this.transaction.add(record);
    // append the modal view
    App.ModalView.create().append();        
},

onSaveClick: function(record) {
    this.transaction.commit();
    this.transitionTo('products');
},

Ideally i need to instruct Ember to stop propagating any changes on the product until the transaction is committed. I tried to use beginPropertyChanges and endPropertyChanges to defer notifying any related observers this way:

renderTemplate:function(controller, record) {        
    this.transaction.add(record);
    record.beginPropertyChanges();
    // append the modal view
    App.ModelView().create().append();        
},

onSaveClick: function(record) {
    record.endPropertyChanges();
    this.transaction.commit();
    this.transitionTo('products');
},

And this prevents the changes from propagating to the list, however the transaction is not committed and the item is still dirty when the modal window is closed.

I'm quite sure i'm not using this properly. I need a way to keep changes away from the store as long as the item is uncommitted as reflected by its currentState

Using the item status isDirty doesn't help to solve this problem because when it's used the item is completely removed from the list and that's not acceptable.

  {{#each item in controller}}
   {{#unless item.isDirty}}
     {{item.name}}
   {{/unless}}

Was my answer unclear? Did you solve this eventually? – albertjan Jan 23 '13 at 07:39 — albertjan, Jan 23 '13 at 07:39

albertjan · Answer 1 · 2013-01-18T09:29:05.437

It is the exact same object you are editing, because the textfield, you are typing, in is bound to the property and the representation in the main list is also bound to the same property they both get updated.

Ember-data takes care op persisting object to the back end not between states in your application.

You should have a look at this. It explains how to make a lazy textfield object one that doesn't update the object immediately with a binding but only after save button is clicked.

Emberjs: Prevent changes propagation throughout a transaction

1 Answers1

Linked