Question

我一直试图使用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 website中记录的相同小部件的示例非常接近。在我的情况下，没有任何渲染。真正奇怪的是检查员的网络选项卡中显示的内容：

Polymer Web Inspector

我认为有一个Loader.js脚本由platform.js安装，该脚本为根页本身（第3行）发送XHR。在我看到的每个其他示例中，加载脚本开始加载导入的Web组件。我无法弄清楚为什么它会在我的案例中这样做。另一个奇怪的事情是来自Parser.js的来电 - 请求的数据网址为data:text/javascript;base64,Ci8vIyBzb3VyY2VVUkw9bnVsbC9bMTQ1M10uanMK，转换为：//# sourceURL=null/[1453].js - 再次，这不是一个非常好的信号。

我试图在我的链接中使用相对src - 无济于事。我基本上处于非常早期的阶段，非常希望能够指出正确的方向。

Answer 1

这是不对的：

<link rel="import" src="/static/paper-button/paper-button.html">

应该是：

<link rel="import" href="/static/paper-button/paper-button.html">

附注：您可能还想使用favicon express中间件来防止＆＃34;可疑＆＃34; http请求。（如果您的公共根目录中没有图标，您会看到快递处理的额外http请求，如果您不在公共场合使用，则中间件将提供快递图标。根。）

最小的工作聚合物例子

1 个答案: