CODEWITHSUNDEEP
inheritancepolymerextendsbehavior
Will Squire
Will Squire

Reputation: 6595

How to observe an inherited property in Polymer without redefining property

How can an inherited property be observed in Polymer without redefining the property? For example, say a behaviour module called InheritedBehaviour has a property called x and is added to a custom module as per below:

<dom-module id="foo-bar">
    <script>
        Polymer({

            is: 'foo-bar',

            behaviors: [
                InheritedBehaviour
            ]

        });
    </script>
</dom-module>

This property can be observed in the following way:

<dom-module id="foo-bar">
    <script>
        Polymer({

            is: 'foo-bar',

            behaviors: [
                InheritedBehaviour
            ],

            properties: {
                x: {
                    type: Number,
                    observer: '_doSomething'
                }
            },

            _doSomething: function() {
                console.log('Something!');
            }

        });
    </script>
</dom-module>

However, this 'redefines' the property on this object. So if InheritedBehaviour had set x to have reflectToAttribute: true, this will no longer be set on redefinition (unless it is all rewritten on the new object).

How can inherited properties be extended rather than overridden?

Thanks

Upvotes: 1

Views: 329

Answers (2)

Avius
Avius

Reputation: 6284

Another option is to implement the observer in the Behaviour itself and then override that, something like:

In InheritedBehaviour

properties: {
    x: {
        type: Number,
        observer: '_doSomething'
    }
},

doSomething: function() {
    console.log('Designed to be overridden!');
}

In foo-bar:

doSomething: function() {
    // Here you can do whatever you want to do!
    // This method overrides the one in the behaviour
}

I removed the underscore, since this method would no longer be 'private'.

Upvotes: 1

tony19
tony19

Reputation: 138696

You could use a complex observer (via the observers array in the Polymer object definition) to observe the behavior's property:

Polymer({
  is: 'x-foo',
  behaviors: [InheritedBehavior],
  observers: ['_doSomething(foo)'],
  _doSomething: function(foo) {...}
});


HTMLImports.whenReady(() => {
  let MyBehavior = {
    properties: {
      foo: {
        type: String,
        value: 'hi',
        reflectToAttribute: true
      }
    }
  };
  
  Polymer({
    is: 'x-foo',

    behaviors: [MyBehavior],

    observers: ['_fooChanged(foo)'],

    _fooChanged: function(foo) {
      console.log('foo', foo);
    },
    _changeFoo: function() {
      const x = ['hey there', 'hello'];
      this.foo = this.foo === x[0] ? x[1] : x[0];
    }
  });
});
<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <div>{{foo}}</div>
      <button on-tap="_changeFoo">Change foo</button>
    </template>
  </dom-module>
</body>

codepen

Upvotes: 2

Related Questions