扩展类Polymer

时间:2018-02-15 14:16:26

标签: javascript polymer-1.0 polymer-2.x html-components

我正在尝试将元素的类扩展到另一个自定义元素,以便我可以从第一个自定义元素访问属性。

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../src/data-model/data-model.html">

<dom-module id="pkg-view">
  <template>
    <style>

    </style>

    <data-model id="dm"></data-model>
    <vaadin-table-new></vaadin-table-new>
  </template>

  <script>
   class PkgView extends DataModel {
   static get is() { return 'pkg-view'; }
   static get properties() {
     return {
      conf_package: {
       type: Object
      }
     }
   }
 };

customElements.define(PkgView.is, PkgView);
  </script>
</dom-module>

正如你所看到的,我试图扩展的自定义元素是DataModel但是,当我尝试运行它时,我在脚本标记的第一行引用时出现以下错误:

未捕获的ReferenceError:未定义DataModel

我确信导入路径是正确的。我以前没有扩展元素,有什么明显缺失的吗? TIA

注意:我一直在遵循以下指示:

https://www.polymer-project.org/2.0/docs/devguide/custom-elements#extending-other-elements

1 个答案:

答案 0 :(得分:0)

data-model.html似乎没有公开DataModel的类定义(例如,将其添加到window)。比直接引用类更灵活的方法是扩展从customElements.get()返回的constructor。在您的情况下,您可以这样做:

class PkgView extends customElements.get('data-model') { ... }

demo