Polymer reset property

Question

I use the [[]] binding in polymer. Their is a way/function to get the first Object as it was as rendered?

My problem is that I change the object in the element and then I want to reset the element to be as it was before the inside change. I thought to deep copy the object but then it make problem with the polymer functions on the object.

<custom-elem item=[[item]]></custom-elem>

in original

item={a:123,b:234}

In the custom element I change the values of item to be

{a:241,b:382}

How can I get the original item inside the custom-elem?

Thanks.

Answer 1

I could think of two solutions

1. assign values as below

   <custom-elem item-orginal=[[item]] item=[[item]]></custom-elem>
   

In your custom-elem when ever you want to reset the item call a function that will reset the value.

resetItem: function() {
  this.item = this.itemOriginal
}

2. In your custom-elem, fire a custom event whenever you want to reset the value, like below.

   resetItem: function() {
     this.fire('custom-item-reset')
   }
   

In the host, listen for this event and reset the item value.

<custom-elem id="customElem" item=[[item]] on-custom-item-reset="resetCustomItem"></custom-elem>

resetCustomItem: function() {
  this.$.customElem.item = this.item;
}

Edit: The code is not formatting clearly. So made some modifications.