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>

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

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

由于

Answer 1

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

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

＆＃13;

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];
    }
  });
});

＆＃13;

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

＆＃13;

codepen

Answer 2

另一个选择是在Behavior本身中实现观察者，然后覆盖它，如：

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

我删除了下划线，因为这种方法不再是私密的。

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

2 个答案: