2015-11-08 80 views
1

我刚开始研究我的第一个聚合物网络应用程序,但我无法弄清楚如何创建一个简单的聚合物应用程序。我安装了聚合物和web_components。并使下面的源代码的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> 

但它似乎并没有工作。我看着控制台,这就是我所看到的。我认为这是没有问题的:

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 

请帮忙,因为我是初学者聚合物。提前致谢。

+0

为了以防万一,您使用的浏览器是什么? – vittore

+0

@vittore Firefox 41.0.2 – user3647254

+0

尝试关注他们在聚合物峰会上发布的代码段http://www.code-labs.io/codelabs/polymer-first-elements/index.html?index=..%2F..% 2Fpolymer-summit&viewga = UA-39334307-12#0告诉我它是否不适合你。 – vittore

回答

1

看起来您正在使用Polymer 0.5语法,但您可能已安装了Polymer 1.0。

试试这个:

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

window.addEvetnListener部分只需要,如果你声明在应用程序的主HTML文件的元素,而不是在一个HTML进口。

+0

我刚刚意识到这件事。谢谢 – user3647254

相关问题