简体   繁体   English

不知道为什么聚合物不起作用

[英]Don't know why Polymer is not working

I have just started working on my first polymer web app but i can't figure out how to create a simple app in polymer. 我刚刚开始开发我的第一个Polymer Web应用程序,但是我不知道如何在Polymer中创建一个简单的应用程序。 I installed polymer and web_components. 我安装了polymer和web_components。 And made the index.html file with the source code below 并使用下面的源代码制作了index.html文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First polymer web APP</title>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
  </head>
  <body>
<polymer-element name="x-foo" noscript>
<template>
<h1>HELLO FROM x-foo</h1>
</template>
</polymer-element>
<x-foo></x-foo>
  </body>
</html>

But it doesn't seems to work. 但这似乎不起作用。 I looked into the console and this is what i look. 我看着控制台,这就是我的样子。 I think there is no problem in this: 我认为这没有问题:

GET 
http://localhost:3000/ [HTTP/1.1 304 Not Modified 23ms]
GET 
http://localhost:3000/bower_components/webcomponentsjs/webcomponents.min.js [HTTP/1.1 304 Not Modified 12ms]
GET 
XHR 
http://localhost:3000/bower_components/polymer/polymer.html [HTTP/1.1 304 Not Modified 3ms]
GET 
XHR 
http://localhost:3000/bower_components/polymer/polymer-mini.html [HTTP/1.1 304 Not Modified 36ms]
GET 
XHR 
http://localhost:3000/bower_components/polymer/polymer-micro.html [HTTP/1.1 304 Not Modified 2ms]
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create

Please help as i am beginner to polymer. 请帮助,因为我是初学者。 Thanks in advance. 提前致谢。

It looks like you're using Polymer 0.5 syntax, but you've probably got Polymer 1.0 installed. 看来您使用的是Polymer 0.5语法,但您可能已经安装了Polymer 1.0。

Try this: 尝试这个:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First polymer web APP</title>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
  </head>
  <body>
<dom-module name="x-foo">
<template>
<h1>HELLO FROM x-foo</h1>
</template>
<script>
  window.addEventListener('WebComponentsReady', function() {
    Polymer({is: 'x-foo'});
  });
</script>
</dom-module>
<x-foo></x-foo>
  </body>
</html>

The window.addEvetnListener part is only necessary if you're declaring your element in the main HTML file of your application rather than in an HTML import. 仅当您在应用程序的主HTML文件而不是HTML导入中声明元素时,才需要window.addEvetnListener部分。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM