Update accepted types for simple observer

[TimvdLippe]

In Polymer/polymer#4574 we updated the accepted values of observer for properties to also accept a function. The documentation of https://www.polymer-project.org/2.0/docs/devguide/properties should be updated to reflect this change.

[ghost]

@arthurevans what example/s do you think we should show for referring to a function directly?

Option 1: Refer to prototype? (shown in Polymer/polymer#4543)

class XCustom extends Polymer.Element {
  static get is() {return 'x-custom'; }
  static get properties() {
    return {
      active: {
        type: Boolean,
        observer: XCustom.prototype._activeChanged
      }
    }
  }
  _activeChanged(newValue, oldValue) {
    this.toggleClass('highlight', newValue);
  }
}

Example 2: this.methodName?

class XCustom extends Polymer.Element {
  static get is() {return 'x-custom'; }
  static get properties() {
    return {
      active: {
        type: Boolean,
        observer: this._activeChanged.bind(this)
      }
    }
  }
  _activeChanged(newValue, oldValue) {
    this.toggleClass('highlight', newValue);
  }
}

Example 3: Anonymous function?

class XCustom extends Polymer.Element {
  static get is() {return 'x-custom'; }
  static get properties() {
    return {
      active: {
        type: Boolean,
        observer: function (newValue, oldValue) {
          this.toggleClass('highlight', newValue);
        }.bind(this)
      }
    }
  }
}

[TimvdLippe]

I think anonymous function is easiest to grasp and self-contained.

…

On Wed, 10 Jan 2018, 04:16 katejeffreys, ***@***.***> wrote: @Arthur <https://github.com/arthur> what example/s do you think we should show for referring to a function directly? Option 1: Refer to prototype? (shown in Polymer/polymer#4543 <Polymer/polymer#4543>) class XCustom extends Polymer.Element { static get is() {return 'x-custom'; } static get properties() { return { active: { type: Boolean, observer: XCustom.prototype._activeChanged } } } _activeChanged(newValue, oldValue) { this.toggleClass('highlight', newValue); } } Example 2: this.methodName? class XCustom extends Polymer.Element { static get is() {return 'x-custom'; } static get properties() { return { active: { type: Boolean, observer: this._activeChanged.bind(this) } } } _activeChanged(newValue, oldValue) { this.toggleClass('highlight', newValue); } } Example 3: Anonymous function? class XCustom extends Polymer.Element { static get is() {return 'x-custom'; } static get properties() { return { active: { type: Boolean, observer: function (newValue, oldValue) { this.toggleClass('highlight', newValue); }.bind(this) } } } } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2404 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFrDb1aLZExnNdLjCeKO_CdEkiDgj8sXks5tJCubgaJpZM4QzACZ> .