inheritance - How to observe an inherited property in Polymer without redefining property -
how can inherited property observed in polymer without redefining property? example, behaviour module called inheritedbehaviour has property called x , added custom module per below:
<dom-module id="foo-bar"> <script> polymer({ is: 'foo-bar', behaviors: [ inheritedbehaviour ] }); </script> </dom-module> this property can observed in 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, 'redefines' property on object. if inheritedbehaviour had set x have reflecttoattribute: true, no longer set on redefinition (unless rewritten on new object).
how can inherited properties extended rather overridden?
thanks
you use complex observer (via observers array in polymer object definition) observe 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>
Comments
Post a Comment