Learning Polymer, getting ReferenceError: Polymer is not defined

Question

我正在关注 https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html

我似乎无法获得运行的代码，我认为这是因为我做的事情根本上是错误的。

devguide.js:

// register an element
MyElement = Polymer({

  is: 'my-element',

  created: function() {
    this.textContent = 'My element!';
  }

});

// create an instance with createElement:
var el1 = document.createElement('my-element');

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="./bower_components/polymer/polymer.html">
    <script src="./devguide.js"></script>
  </head>
  <body>
  </body>
</html>

Answer 1

您尝试查看 index.html 的方式如何？您可能遇到了 https://github.com/Polymer/polymer/issues/1535

中描述的问题

要使 HTML 导入工作，您无法从 file:// URL 访问它，您需要运行网络服务器。

Answer 2

在具有原生 html 导入的浏览器中，例如 chrome，polymer.html 文件在 index.js 脚本运行之前被导入，因此它具有访问 Polymer 变量。

我认为您使用的是没有本机 html 导入的浏览器，例如 Firefox，如您所见 here

Here 是 jsBin 演示，使用的代码在 Chrome 中有效，但在 Firefox 中无效，（注意我还在正文中放置了一个 <my-element></my-element> 标记，因此您可以看到它正在工作，否则它与您的示例相同）。

如果是这种情况，你不能在脑海中包含注册元素的脚本，你要么将脚本放入html文件中，例如

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

devguide.html

<script>
  MyElement = Polymer({

    is: 'my-element',

    created: function() {
      this.textContent = 'My element!';
    }
  });
</script>

或者您可以将脚本包含在主 html 文件 "index.html" 中，但要执行此操作，您必须等待以确保 html 导入准备就绪，使用 HTMLImports.whenReady

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="./bower_components/polymer/polymer.html">
</head>
<body>
  <script>
    HTMLImports.whenReady(function () {
      MyElement = Polymer({
        is: 'my-element',
        created: function() {
          this.textContent = 'My element!';
        }
      });
    });
  </script>
</body>
</html>

Demo

创建元素的实例时，您可以在 index.html 文件中的任意位置声明它，如下所示：

<my-element></my-element>

或在等待 WebComponentsReady 事件后在 javascript 中创建它，但如果您像这样使用此方法，则必须实际将其放入 dom 中：

window.addEventListener('WebComponentsReady', function(e) {

    //- because you register it using MyElement = Polymer...
    var myElement = new MyElement();

    //- add it to the body, or wherever else you want, if you want to see it
    document.body.appendChild(myElement);
});

Learning Polymer, getting ReferenceError: Polymer is not defined

Learning Polymer, getting ReferenceError: Polymer is not defined

html

javascript

polymer

polymer-1.0