2017-06-12 126 views
1

嗨我正在尝试执行一个基本的聚合物程序。在步骤var el = new HelloElement();处获得以下例外。此外,元素本身并未附加到页面上。聚合物基本问题

异常

Uncaught TypeError: Illegal constructor 
    at PropertyAccessors (property-accessors.html:119) 
    at TemplateStamp (template-stamp.html:119) 
    at PropertyEffects (property-effects.html:1075) 
    at PolymerElement (element-mixin.html:459) 
    at GestureEventListeners (gesture-event-listeners.html:40) 
    at LegacyElement (legacy-element-mixin.html:69) 
    at PolymerGenerated (class.html:137) 
    at (index):18 
    at html-imports.js:580 
    at html-imports.js:617 

CODE

<!DOCTYPE html> 
<html> 
<head> 
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"> </script> 
<link rel="import" href="bower_components/polymer/polymer.html"/> 
</head> 
    <body> 
     <script> 
      HTMLImports.whenReady(function() { 
      HelloElement = Polymer.Class({ 
       is: "hello-element", 
       created: function() { 
        this.textContent = "Hello World"; 
       } 
      }); 
      document.registerElement('hello-element', HelloElement); 

      var el = new HelloElement(); 
      document.querySelector("body").appendChild(el); 
     }) 
     </script> 
    </body> 
</html 

回答

3

尝试使用如下新的类语法:

HTMLImports.whenReady(function() { 
    class MyElement extends Polymer.Element { 
    static get is() { return 'my-element'; } 
    static get properties() { 
     return { 
     prop: { 
      type: String 
     } 
     } 
    } 
    constructor() { 
     super(); 
     this.prop = 'my-element' 
    } 
    } 
    customElements.define(MyElement.is, MyElement); 

    var el = new MyElement(); 
    el.textContent = 'my-element'; 
    document.querySelector("body").appendChild(el); 
}); 

JSBin:http://jsbin.com/vefelacada/edit?html,console,output

看到更多的信息:https://www.polymer-project.org/2.0/docs/devguide/registering-elements

===编辑

如果你真的想用聚合物1.0语法,你应该这样做:(肯定不是100%是什么错误的真正含义)

Polymer({ 
    is: "hello-element", 
    }); 

    var el = document.createElement("hello-element"); 
    document.querySelector("body").appendChild(el); 
    el.textContent = 'my-element'; 

http://jsbin.com/zihayumaqo/edit?html,console,output

+0

Thnx ...有聚合物有什么好的视频教程吗?我看到的那些似乎已经过时 – user3310115

+0

我想聚播仍然是一个很好的起点。还有聚合物网站和聚合物松弛通道的文档... – Nicolas

+0

@ user3310115顺便说一句,请接受答案,如果这解决了你的问题:) – Nicolas