Emberjs：防止在整个事务中改变传播

问题描述

我有一个场景，我在页面中列出产品，并允许用户仅在模态窗口中编辑产品的属性。

当用户点击产品并开始编辑产品的属性时，更改将立即传播到产品列表页面中的产品，任何页面的任何部分直接或间接地对经历变化的财产。不是所期望的行为。只有当用户确认更改时才应传播更改，即单击保存按钮，交易提交和模态窗口关闭

  transaction：APP。 store.transaction（），
 
 renderTemplate：function（controller，record）{
 this.transaction.add（record）; 
 //附加模态视图
 App.ModalView.create（）。append（）; 
}，
 
 onSaveClick：function（record）{
 this.transaction.commit（）; 
 this.transitionTo（'products'）; 
}，
  

理想情况下，我需要指示Ember停止传播产品上的任何更改，直到交易被承诺。我试图使用beginPropertyChanges和endPropertyChanges以这种方式推迟通知任何相关的观察者：

  renderTemplate：function（controller，record）{
 this.transaction.add（record）; 
 record.beginPropertyChanges（）; 
 //附加模态视图
 App.ModelView（）。create（）。append（）; 
}，
 
 onSaveClick：function（record）{
 record.endPropertyChanges（）; 
 this.transaction.commit（）; 
 this.transitionTo（'products'）; 
}，
  

这样可以防止更改传播到列表，但是事务是当模态窗口关闭时，未执行并且项目仍然变脏。

我确定我没有正确使用它。只要项目未被提交，我需要一种方式来保持更改，只要它的当前状态反映出来。

使用项目状态isDirty无法解决这个问题问题是因为使用该项目是完全从列表中删除的，这是不可接受的。

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

解决方案

正在编辑的确切同样的对象，因为您正在键入的文本字段绑定到属性，在主列表中的表示也绑定到相同的属性，他们都被更新。

Ember-data将持久对象保留在后端，而不是应用程序中的状态之间。你应该看看。它解释了如何使一个懒惰的文本框对象不立即使用绑定更新对象，但只有在保存按钮被点击之后。

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}}

解决方案

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：防止在整个事务中改变传播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！