Question

我希望能够创建一个类来传递给Polymer函数来创建元素。明显的用例是拥有一个我们的开发人员可以用来构建Polymer元素的基类。

但是，Polymer似乎忽略了类中的生命周期方法。以下代码不运行#created。有解决方法吗？

//attempt 1
class CustomElement {

  is = 'sample-multi-view-polymer-buic'

  created() { console.log('created') } // never called
}

export default Polymer(new CustomElement()) // doesn't work (see error below)

由于我使用Babel将ES6转换为ES5，因此上述代码与下面的代码相同。它也不起作用。

 // attempt2
function CustomElement() {

  this.is = 'sample-multi-view-polymer-buic'
}

CustomElement.prototype.created= function() { console.log('hi') } //never called

Answer 1

有一个article for using ES6 with Polymer in the docs

所以你的结果有两件事：

您错过了beforeRegistered()方法。
您需要使用Polymer()来实例化元素的类。

我是这样做的：

<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">

<dom-module id="x-example">

  <template>
    <paper-input value="{{name::input}}"></paper-input>
    <h4>{{name}}</h4>
  </template>
  
  <script>
    "use strict";

    class xExample {

      beforeRegister() {
        this.is = "x-example";
        this.properties = {
          name: {
            type: String,
            value: "I'm a data-binded prop"
          }
        }
      }

      ready() {
        console.log("ready");
      }
    }

    Polymer(xExample);
  </script>

</dom-module>

<x-example></x-example>

注意：

上述代码段仅适用于Chrome / FF
对于其他一切你当然可以“babelize”它。

使用ES6类创建聚合物元素？

1 个答案: