在菲尼克斯框架中导入高聚物html页面

Question

我试图将我的聚合物工具包括在我的模板页面，但服务器没有正确地路由到文件。我已经将文件放置在各自的路径中，但当我单击活动链接时，我会得到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

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

<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

通过添加到polymer中开始服务endpoint.ex资产

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

为包添加HTML导入：

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

最有可能的是，您也愿意为多填充库服务。为此，请将webcomponents-lite.js复制到web/static/vendor/下。

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

组件JSON文件“bower_components/paper/.Bower.json”必须具有main属性。

并停止处理其他bower_components AFAICS。为了防止这种情况，您可以在项目根的某个子文件夹中使用保龄球/硫化胶。此外，没有必要处理聚合物的bower_components与早午餐，而你使用硫化。

还请参阅关于聚合物CDN的问题 --可能是从CDN加载元素。

Answer 2

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

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

(请注意删除"/assets")。你该走了。