8

我想要一个我定义为Polymer.IronScrollTargetBehavior在 Polymer 2 中的自定义元素。

在 Polymer 1 中，这可以通过将其添加到behaviors数组中来完成：

Polymer({
    is: 'my-element',
    behaviors: [Polymer.IronScrollTargetBehavior]
});

在 Polymer 2 upgrade guide中，它说您应该：

将“行为”实现为返回类表达式的混合。

在链接的文章中，它解释了如何为 mixins 使用以下语法：

let MyMixin = (superclass) => class extends superclass {  
    foo() {
        console.log('foo from MyMixin');
    }
};

class MyClass extends MyMixin(MyBaseClass) {  
    /* ... */
}

我主要了解这里发生的事情（尽管我发现很难理解 mixin 语法），并且我可以让示例代码正常工作。

我无法做的是将这个概念应用于Polymer.IronScrollTargetBehavior，并为它创建一个 mixin。由于该行为已经被定义为一个对象，我不知道该放在哪里。

那么，如何在这种情况下实现正确的 mixin，或者如果我走错了路，如何将定义的 Polymer 行为之一应用于 Polymer 2 中的自定义元素？

4

2 回答 2

9

您可以通过扩展 Polymer.mixinBehaviors(behaviors, klass)where
-behaviors是 Behavior 对象或行为数组
-klass是 Element 类，将 Polymer 2 混合行为用作 mixin。

IE

<dom-module id="element-name">
  <template><!-- ... --></template>
  <script>
    class MyElement extends Polymer.mixinBehaviors([MyBehavior, MyBehavior2], Polymer.Element) {
     static get is() { return 'element-name' }
     /* ... */
    }
    customElements.define('element-name', MyElement);
  </script>
</dom-module>

有关更多详细信息，请搜索 Polymer 源代码以获取mixinBehaviors方法：polymer/lib/legacy/class.html

值得一读：https ://www.polymer-project.org/2.0/docs/upgrade#mixins

于 2017-07-06T07:45:47.697 回答
7

Polymer 2.0 有一个兼容层，它仍然支持旧的 Polymer 函数语法。大多数 2.0 预览元素（如果不是全部）仍保留旧语法。重大更改主要在dom-module标记中。

如果您正在编写新元素，建议您切换到基于类的语法。但是，如果您将 1.0 元素移植到 2.0 并且这些元素依赖于 Polymer 行为，我认为此时您没有太多选择，只能保留旧语法。

在基于类的语法中，您可以使用类似这样的方式流畅地模拟类 mixins 的 Element 多重继承

    let Mixin = (superclass) => new MixinBuilder(superclass);
    class MixinBuilder {  
        constructor(superclass) {
          this.superclass = superclass;
        }

        with(...mixins) { 
         return mixins.reduce((c, mixin) => mixin(c), this.superclass);
        }
    }

    const MyMixin = subclass => class extends subclass {
      _test(){

      }
    }

    const MyMixinTwo = subclass => class extends subclass {
      _testTwo(){

      }
    }

    class MyElement extends Mixin(Polymer.Element).with(MyMixin,MyMixin2) {
       static get is() { return 'my-element' }
    }

您可以将 MixinBuilder 分离到它自己的文件中，然后在组合使用 mixin 的元素时将其作为 Html Import 依赖项引用。

于 2017-01-31T05:03:13.020 回答