最小的工作聚合物例子
我一直在尝试使用Polymer在浏览器中简单地渲染一个非常小的网页 - 我在服务器端使用Node/ExpressJS/Jade设置.我的代码与Polymer文档附带的示例一样接近,我想我错过了一些非常简单的东西.我正在使用Chrome M35.
在服务器上,我已经使用bower安装了所有的Polymer材料(平台,核心和纸张),我已经映射bower_components到静态服务/static
app.use('/static', express.static(path.join(process.cwd(), 'bower_components')))
我已经验证我的服务器可以正确地提供资源,例如http://localhost:3000/static/paper-button/paper-button.html- 这将返回所需文件的内容.
页面提供的HTML是这样的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/static/platform/platform.js"></script>
<title>Authenticate</title>
<link rel="import" src="/static/paper-button/paper-button.html">
<style>
body {
font-family: 'Helvetica Neue';
margin: 0;
padding: 24px;
user-select: none;
transform: translateZ(0);
}
paper-button {
margin: 1em;
width: 10em;
}
paper-button.colored {
color: #4285f4;
fill: #4285f4;
}
</style>
</head>
<body>
<paper-button label="Authenticate" class="colored"></paper-button>
</body>
</html>
这与Polymer网站上记录的相同小部件的示例非常接近.在我的情况下,没有任何渲染.真正奇怪的是检查器的"网络"选项卡中显示的内容:
有一个Loader.js脚本,我相信它是由安装的platform.js,它为根页本身(第3行)发送XHR.在我看到的每个其他示例中,加载脚本开始加载导入的Web组件.我无法弄清楚为什么它在我的情况下这样做.另一个奇怪的事情是来自Parser.js的请求 - 请求的数据URL data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK,转换为://# sourceURL=null/[1453].js- 再次,不是一个非常好的标志.
我试图src在我的链接中使用亲戚- 无济于事.我基本上处于非常早期的阶段,并且非常希望能够指出正确的方向.
这个不对:
<link rel="import" src="/static/paper-button/paper-button.html">
它应该是:
<link rel="import" href="/static/paper-button/paper-button.html">
附注:您可能还想使用favicon express中间件来防止"可疑"的http请求.(如果您的公共根目录中没有favicon,您将看到由express处理的额外http请求,如果您的公共根目录中没有一个,则中间件将提供表达的favicon.)