在 Phoenix Framework 中导入 Polymer html 页面

Question

我试图将我的 Polymer 工具包含在我的模板页面中，但服务器没有正确路由到文件。我已将文件放在各自的路径中，但是当我点击实时链接时，我得到了 404。

    <link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-pages/iron-pages.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-ajax/iron-ajax.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-meta/iron-meta.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-iconset-svg/iron-iconset-svg.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-iconset/iron-iconset.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-flex-layout/iron-flex-layout.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-icons/iron-icons.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-icons/maps-icons.html") %>"/>
<link rel="import" href="<%= static_path(@conn, "/assets/polymer/iron-elements/iron-icons/social-icons.html") %>"/>

Answer 1

您的静态资产路径很可能不正确。我相信如果你把它改成：

"/polymer/iron-elements/..."

（注意删除“/assets”）。你应该可以走了。

Answer 2

您可以使用 vulcanize 从多个依赖项构建单个文件。以下是以下元素的示例设置：

<paper-dropdown-menu label="Your favourite pastry">
  <paper-menu class="dropdown-content">
    <paper-item>Croissant</paper-item>
    <paper-item>Donut</paper-item>
    <paper-item>Financier</paper-item>
    <paper-item>Madeleine</paper-item>
  </paper-menu>
</paper-dropdown-menu>

创建 target.html:

<link rel=import href=bower_components/paper-dropdown-menu/paper-dropdown-menu.html>
<link rel=import href=bower_components/paper-menu/paper-menu.html>
<link rel=import href=bower_components/paper-item/paper-item.html>

硫化元素：

vulcanize --inline-scripts --inline-css target.html > web/static/assets/polymer/rubber.html

通过添加到 endpoint.ex 开始提供 polymer 资产：

only: ~w(css fonts images js favicon.ico robots.txt polymer)

为包添加 HTML 导入：

<link rel="import" href="<%= static_path(@conn, "/polymer/rubber.html") %>">

您很可能还想为 polyfill 库提供服务。为此复制 web/static/vendor/ 下的 webcomponents-lite.js。

注意：早午餐会产生以下错误：

Component JSON file "bower_components/paper-elements/.bower.json" must have main property.

并停止处理其他 bower_components AFAICS。为了防止它，您可以在项目根目录的某个子文件夹中使用 bower/vulcanize 。此外，在使用硫化时，无需使用 brunch 处理聚合物 bower_components。

另请参阅 question about Polymer CDN - 它可能会从 CDN 加载元素。

在 Phoenix Framework 中导入 Polymer html 页面

Importing Polymer html pages in Phoenix Framework

polymer

phoenix-framework

brunch