最小工作聚合物示例 [英] Minimal working Polymer example
问题描述
我一直在尝试使用Polymer来获得一个极小的网页，以便在浏览器中简单地进行渲染-我正在服务器端使用Node/ExpressJS/Jade设置.我的代码与Polymer文档附带的示例非常接近，我想我缺少了一些非常简单的东西.我正在使用Chrome M35.
I've been trying to get an extremely minimal web page using Polymer to simply render in the browser - I'm using a Node/ExpressJS/Jade setup on the server-side of things. My code is as close as it gets to the examples that ship with the Polymer documentation, I think I'm missing something really simple. I'm using Chrome M35.
在服务器上，我已经使用Bower安装了所有Polymer东西(平台，核心和纸张)，并且已将bower_components映射为在/static
On the server, I have installed all the Polymer stuff (platform, core and paper) using bower and I've mapped bower_components to be served statically under /static
app.use('/static', express.static(path.join(process.cwd(), 'bower_components')))
我已经确认我的服务器可以正确提供http://localhost:3000/static/paper-button/paper-button.html之类的资源-这将返回所需文件的内容.
I've verified that my server can correctly serve resources such as http://localhost:3000/static/paper-button/paper-button.html – this returns the content of the desired file.
页面提供的HTML就是这样的:
The HTML served by the page is as such:
<!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>
This is as close as it gets to the example for the same widget as documented on the Polymer website. In my case, nothing renders. The really odd thing is what is shown in the Network tab of the inspector:
有一个Loader.js脚本，我相信它是由platform.js安装的，该脚本为根页面本身(第3行)发送XHR.在其他每个示例中，我看到该加载脚本开始加载导入的Web组件.我只是不知道为什么要这样做.另一个奇怪的事情是来自Parser.js的呼叫–请求的数据URL是data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK，它转换为://# sourceURL=null/[1453].js-同样，这不是一个好兆头.
There is a Loader.js script, which I believe gets installed by platform.js, which sends an XHR for the root page itself (the 3rd line). In every other example I see, that loading script starts loading the imported web components. I just can't figure out why it's doing this in my case. The other odd thing is the call originating from Parser.js – the requested data URL is data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK, which translates to: //# sourceURL=null/[1453].js - again, not a very good sign.
我尝试在链接中使用相对的src-无济于事.我基本上还停留在很早的阶段，因此很高兴能指出正确的方向.
I've tried to use relative srcs in my links - to no avail. I'm basically stuck at a very early stage and would really appreciate to be pointed in the right direction.
推荐答案
这不对:
<link rel="import" src="/static/paper-button/paper-button.html">
应该是:
<link rel="import" href="/static/paper-button/paper-button.html">
旁注:您可能还希望使用favicon Express中间件来阻止可疑" http请求. (如果您在公共根目录中没有网站图标，则会看到一个额外的http请求由express处理，如果您在公共根目录中没有一个http图标，则中间件将为Express网站图标提供服务.)
Side note: You might also want to use the favicon express middleware to prevent a "suspicious" http request. (If you don't have a favicon in your public root, you'll see an extra http request being handled by express, the middleware will serve the express favicon if you don't have one in your public root.)
这篇关于最小工作聚合物示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
