聚合物noob ...
我正在尝试根据Polymer API文档创建自定义元素,其中我的主页面如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<div id="test"></div>
<polymer-element name="book-template" constructor="BookTemplate" noscript>
<template>
<style>
h1 { color: orange; }
</style>
<h1>Hello from some-foo</h1>
</template>
</polymer-element>
</body>
</html>
我知道如果我只是放在<book-template></book-template>页面上,或者如果我在<body>标签内做了类似的事情,页面内容将呈现:
<script>
var book = document.createElement('book-template');
document.getElementById('test').appendChild(book);
</script>
但我正在尝试使用元素的构造函数属性,假设这将在放置在其中的某个位置时创建元素<body>:
<script>
var book = new BookTemplate();
</script>
...但获取未定义BookTemplate()的控制台消息.
我确定这很简单......任何想法？提前致谢.
我想你必须等待聚合物就绪事件,以便构造函数在全局window对象http://jsbin.com/kosuf/2/edit?html,console,output中可用:
<script>
document.addEventListener('polymer-ready',function() {
var book = new BookTemplate();
if (book) {
console.log('Ok');
}
});
</script>