All geek questions in one place

Understanding the constructor attribute in polymer elements

A polymer noob ...

I am trying to create a custom element according to the Polymer API docs, where my main page looks like this:

<!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>

I know that the contents of the page will be displayed if I just put <book-template></book-template>on the page, or if I do something like this inside the tag <body>:

  <script>
    var book = document.createElement('book-template');
    document.getElementById('test').appendChild(book);
  </script>

But I'm trying to use the element's constructor attribute, assuming this will create the element if it is placed somewhere inside <body>:

<script>
  var book = new BookTemplate();
</script>

... but receiving a console message that is not defined by BookTemplate ().

I'm sure this is something simple ... any idea? Thanks in advance.

+4
source share
1 answer

, , , 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>
+5

Source: https://habr.com/ru/post/1541771/

More articles:


All Articles