Question

我试图直接从Javascript实例化Web组件，但系统找不到公共构造函数。我将举一个简单的例子来展示背景和结果：

HTML模板：

<polymer-element name="wc-foo" constructor="Foo" noscript>
    <template>
       Hello World!
    </template>  
</polymer-element>

HTML索引：

<html>
<head>
    <script src="general/scripts/polymer/polymer.min.js"></script>
    <link rel="import" href="...">
</head>

<body>  
</body>

<script>
    console.log (window); // (1)
    console.log (window.Foo); // (2)
    var foo = new Foo (); // (3)
</script>

</html>

控制台结果：

（1）我检查了窗口对象，它包含构造函数Foo：function（）{return f（a）} （2）我不知道是什么，但window.Foo返回undefined （3）......所以，新的Foo（）失败：未捕获的ReferenceError：未定义Foo

有人可以帮我理解什么是问题？感谢。

Answer 1

您需要等待polymer-ready事件触发以确保Polymer已完成其设置：

document.addEventListener('polymer-ready', function() {
  console.log (window.Foo); // (2)
  var foo = new Foo (); // (3)
  console.log(foo)
});

演示：http://jsbin.com/dabaloso/1/edit

从JS实例化Web组件

1 个答案: