How to unbind property in Polymer 1.0

Question

In Polymer 1.0 we can bind an element property to a variable:

<paper-textarea id='area' value={{some_variable}}></paper-textarea>

How can I unbind it?

Below is a solution that doesn't works for me. When some_variable changes it updates area value.

this.$.area.value = "foo";

The Polymer API doesn't currently expose any methods to unbind values. Perhaps if you elaborated more on your situation, we could provide you with an alternate solution? — Zikes, Jul 02 '15 at 15:41
I had textarea binded with iron-ajax response. What I was trying to achieve was updating textarea value periodically but disable update when user focus input (to prevent overriding data which is being input by the user) My solution is to handle response with on-response event and there decide by flag if value should be updater pr not. Flag is controlled in on-focus/on-blurr events of textarea. — Panchito91, Jul 08 '15 at 07:00

score 2 · Accepted Answer · edited May 23 '17 at 12:09

You can't dynamically bind and/or unbind to element attributes in Polymer 1.0, because bindings are baked during element registration time, not during created/ready/attached. Ref Binding imperatively

Honestly I'm not exactly sure what your use-case is; however, it highly likely that you can achieve it by a) binding your value attribute to a computed function; or b) bind to a dummy variable

<paper-textarea id='area' value={{letsCompute(some_variable)}}></paper-textarea>

...

letsCompute: function (v) {
  //return your logic to bind or unbind
},
...

score 1 · Answer 2 · answered Jul 03 '15 at 02:58

It is not 100% clear what you are trying to achieve, but with Polymer you can do one-way data binding.

Downward binding:

<script>
  Polymer({
    is: 'custom-element',
    properties: {
      prop: String    // no notify:true!
    }
  });

</script>

...

<!-- changes to "value" propagate downward to "prop" on child -->
<!-- changes to "prop" are not notified to host due to notify:falsey -->
<custom-element prop="{{value}}"></custom-element>

Upwards binding:

<script>
  Polymer({
    is: 'custom-element',
    properties: {
      prop: {
          type: String,
          notify: true,
          readOnly: true
        }
    }
  });
</script>

...

<!-- changes to "value" are ignored by child due to readOnly:true -->
<!-- changes to "prop" propagate upward to "value" on host  -->
<custom-element prop="{{value}}"></custom-element>

Check out the documentation for more information.

How to unbind property in Polymer 1.0

2 Answers2