如何在不重新定义属性的情况下在 Polymer 中观察继承的属性

Question

如何在不重新定义属性的情况下在 Polymer 中观察继承的属性？例如，假设一个名为 InheritedBehaviour 的行为模块有一个名为 x 的属性并按以下方式添加到自定义模块：

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

            is: 'foo-bar',

            behaviors: [
                InheritedBehaviour
            ]

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

这个属性可以通过以下方式观察：

<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>

但是，这个'redefines'这个对象上的属性。因此，如果 InheritedBehaviour 已将 x 设置为具有 reflectToAttribute: true，这将不再在重新定义时设置（除非在新对象上全部重写）。

如何扩展而不是覆盖继承的属性？

谢谢

Answer 1

您可以使用 complex observer（通过 Polymer 对象定义中的 observers 数组）来观察行为的属性:

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

Answer 2

另一种选择是在行为本身中实现观察者，然后覆盖它，例如：

在 InheritedBehaviour 中

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

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

在 foo-bar 中：

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

我删除了下划线，因为此方法将不再是 'private'。

如何在不重新定义属性的情况下在 Polymer 中观察继承的属性

How to observe an inherited property in Polymer without redefining property

inheritance

extends

behavior

polymer

如何在不重新定义 属性 的情况下在 Polymer 中观察继承的 属性

How to observe an inherited property in Polymer without redefining property

inheritance

extends

behavior

polymer

如何在不重新定义属性的情况下在 Polymer 中观察继承的属性