CODEWITHSUNDEEP
propertiespolymerpolymer-1.0
Rancid
Rancid

Reputation: 159

How to don't invoke the change notification in a observed property in Polymer?

I have a property ("toggleChecked") changed by a toggle button that must to do some stuff when I press the toggle. I need to reset the toggle value without invoke the observer function.

<dom-module id="custom-element">
<template>
  <paper-toggle-button checked="{{toggleChecked}}">Toggle</paper-toggle-button>
</template>
<script>
  Polymer({
    properties: {
      toggleChecked: {
        type: Object,
        observer: 'toggleCheckedChanged'
      }
    },
    toggleCheckedChanged: function(value) {
      // do some stuff...
    },
    resetToggleChecked: function(value) {
      // change the value, but don't activate the observer function!
      this.toggleChecked = value; // ??
    }
  });
</script>
</dom-module>

The "resetToggleChecked" is invoked with an unknown value and I must be sure that the "toggleChecked" is changed without do the "some stuff". I must do "some stuff" only when I press the toggle with the mouse.

Is there a way to change the property without invoke the observed function?

Upvotes: 1

Views: 182

Answers (1)

zacharytamas
zacharytamas

Reputation: 1039

Checking the documentation, paper-toggle-buttons emit two different change events:

  • change: Fired when the checked state changes due to user interaction.
  • iron-change: Fired when the checked state changes.

If you bind a callback to the change event only, your callback will only run when the button is toggled actively from user input and not just when the underlying value changed. 

<dom-module id="custom-element">
<template>
  <paper-toggle-button 
    on-change="_onChanged" 
    checked="{{toggleValue}}">Toggle</paper-toggle-button>
</template>
<script>
  Polymer({
    properties: {
      toggleValue: {
        type: Boolean
      }
    },
    _onChanged: function(event) {
      // This is called only when the paper-toggle-button changes 
      // via user interaction. 
      // do some stuff...
    },
    resetToggleChecked: function(value) {
      // This will cause the toggle's checked value to change
      // without triggering the _onChanged handler.
      this.toggleValue = value;
    }
  });
</script>
</dom-module>

Edit: corrected wrong line: on-changed="{{_onChanged}}" with: on-change="_onChanged"

Upvotes: 2

Related Questions