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

问题描述 投票:7回答:3

我正在试验Polymer 2.x,我不理解的是如何在Polymer 2.x,iron-resizable-behavior中使用Polymers自己的行为作为例子。

Polymer 2.0升级指南告诉我们,对于我们自己的组件,我们应该使用类表达式mixin。这很好,但聚合物自身行为怎么样?他们是否正在被重写为mixins,还是会保持不变?有一种Polymer.mixinBehaviors方法似乎允许我使用Polymer 1.x mixins。这是最终解决方案还是中间步骤?

换句话说:聚合物行为是否被认为是聚合物2.x虽然我们被告知使用mixins作为我们自己的组件?

资料来源:

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

Applying Behaviors with JS Mixins in Polymer 2

polymer polymer-2.x
3个回答
6
投票

我认为Polymer有一个API。我认为这是dedupingMixin。下面是一个如何为您自己的行为创建mixin以及如何在元素类中使用它的示例。

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

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

2
投票

所以我找到了一种如何在Polymer2中使用铁可调整行为的方法 而不是使用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);
    }

}
© www.soinside.com 2019 - 2024. All rights reserved.