我正在试验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
我认为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());
}
}
class MyElement extends Polymer.mixinBehaviors([Polymer.IronFormElementBehavior], Polymer.Element) { ... }
所以我找到了一种如何在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);
}
}