Question

聚合物... ...

我正在尝试根据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（）的控制台消息。

我确定这很简单......任何想法？提前谢谢。

Answer 1

我想您必须等待polymer-ready event，以便构建器在全局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>

理解Polymer元素中的构造函数属性

1 个答案: