让 Polymer 元素出现在 JSBin 中

Question

我有以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <base href="http://polygit.org/polymer+:master/components/">

  <link href="polymer/polymer.html" rel="import">

  <link rel="import" href="paper-input/paper-input.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">

  <title>JS Bin</title>
</head>
<body>

       <paper-input name="some"></paper-input>
          <paper-input name="some"></paper-input>

    <my-el></my-el>

    <dom-module id="my-el">
      <template>
        <style>
          display: block;
        </style>
         I AM HERE!

          <paper-input name="some"></paper-input>
          <paper-input name="some"></paper-input>

        <script>
          Polymer({
            is: "my-el",

            ready: function(){
              console.log("READY!?!");
            }
          })
        </script>
      </template>
    </dom-module>

    AND:

  </body>
</html>

在这个 Jsbin 中：http://jsbin.com/qiyohaj/edit?html,console,output

非常简单的问题 L 为什么 "x-el" 不会显示，运行 ready()...？

Answer 1

您在 template 标签内创建了 Web 组件的 script 部分，该元素永远不会被注册。

尝试用这个替换：

<dom-module id="my-el">
  <template>
    <style>
      display: block;
    </style>

    <paper-input name="some"></paper-input>
    <paper-input name="some"></paper-input>
  </template>
  <script>
    Polymer({
      is: "my-el",
      ready: function(){
        console.log("ready");
      }
    });
  </script>
</dom-module>

让 Polymer 元素出现在 JSBin 中

Getting a Polymer element to appear in JSBin

javascript

polymer

jsbin