在 Polymer 2.x 中使用 Polymer 自身的行为

Question

我正在试验 Polymer 2.x，我不明白的是如何在 Polymer 2.x、iron-resizable-behavior 中使用 Polymer 自身的行为作为示例。

Polymer 2.0 升级指南告诉我们，对于我们自己的组件，我们应该使用 class 表达式混合。这很好，但是 Polymers 自己的行为呢？它们是在被重写为 mixin 的过程中还是会保持不变？有一个 Polymer.mixinBehaviors 方法似乎允许我使用 Polymer 1.x mixins。这是最终解决方案还是中间步骤？

换句话说：Polymer 的行为是否被认为是 Polymer 2.x 尽管我们被告知要为我们自己的组件使用 mixin？

来源：

https://www.polymer-project.org/2.0/docs/upgrade#upgrading-to-class-based-elements

Applying Behaviors with JS Mixins in Polymer 2

Answer 1

我认为 Polymer 对此有一个 API。我认为是dedupingMixin。下面是一个如何为您自己的行为创建混合以及如何在您的元素中使用它的示例 class.

var MyBehaviorMixin = Polymer.dedupingMixin(function(superClass){
  return class MyBehavior extends superClass {
    constructor() {
      super();
    }

    methodInBehavior() {
      return "this method is defined in Behavior";
    }
  }
}
class MyElement extends MyBehaviorMixin(Polymer.Element){
  constructor(){
    super();
    console.log(this.methodInBehavior());
  }
}

Answer 2

class MyElement extends Polymer.mixinBehaviors([Polymer.IronFormElementBehavior], Polymer.Element) { ... }

Answer 3

所以我找到了一种在 Polymer2 中使用 iron-resizable-behavior 的方法
我没有使用 Mixin，而是使用了 codeMonkey 的语法并扩展了他的答案以展示如何使用它
据我所知，这个解决方案是聚合物 1 和 2 的混合体

class customElement extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
    static get is() { return 'custom-element'; }

    ready() {
        super.ready();

        this.addEventListener('iron-resize', () => { this.onWidthChange() });

    }

    onWidthChange() {
        var w = this.offsetWidth;
        if (w > 0)
            console.log("Width of page is now ", w);
    }

}

在 Polymer 2.x 中使用 Polymer 自身的行为

Using Polymers own behaviors in Polymer 2.x

polymer

polymer-2.x