在 Play 1 框架中使用带有 groovy 模板的聚合物答案

【问题标题】：Using polymer with groovy template in Play 1 framework在 Play 1 框架中使用带有 groovy 模板的聚合物
【发布时间】：2015-07-15 11:37:39
【问题描述】：

我已将代码简化为核心。有一个自定义元素：

<link rel="import" href="/public/bower_components/polymer/polymer.html">
<dom-module id="my-button">
    <template>
        <button onclick = "custom_click()">&{common.TWords.REGION_MAP}</button>
    </template>
    <script>
        Polymer({
            is: "my-button"
        });
    </script>
</dom-module>

和我正在使用我的按钮的索引文件：

 #{extends 'layouts/activ_page_template.html' /}
#{set title: play.i18n.Messages.get(common.TWords.ACTIVSITE_MENU_CONTACTS).concat(" | activ") /}
<script src="/public/javascripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/public/bower_components/webcomponentsjs/webcomponents.min.js"></script>

    <div class="row">
  <div class="col-xs-12">
    #{page_gradient_title}
        &{common.TWords.ACTIVSITE_TOPLINKS_CONTACTS}
    #{/page_gradient_title}
  </div>
</div>
//following two lines are in question
    #{polymer/my-button /}
    <my-button></my-button>

如果我在轻 DOM 中使用 html 导入自定义标签 groovy 模板元素，例如 &{common.TWords.REGION_MAP} 不会被渲染，只会被逐字复制。但是，如果我以 groovy 模板方式导入标签，例如 #{polymer/my-button /}，它只适用于 Google Chrome。问题出在其他浏览器上，例如 Mozilla firefox。在那个浏览器中，我收到一个错误“ReferenceError：Polymer 未定义”，因为 html 导入最终会自然而然地在自定义标签中留下 Polymer 对象未定义。是否可以在自定义元素的本地 DOM 中使用 groovy 模板，如果可以，那么如何？

【问题讨论】：

标签： groovy playframework-1.x polymer-1.0

【解决方案1】：

我无法直接尝试，但您可以尝试以下步骤：

MyButton 必须是标签或动态 html 模板的一部分（例如在 app/views/parts/polymerLibrary.html）#included 在您的页面中
标签<link rel="import" href="...">中的每个链接都必须使用Play Framework Groovy语法，即@{'/public/bower_components/polymer/polymer.html'}
最重要的：每个导入都称为绝对 URL，带有 @@{'/public/bower_components/polymer/polymer.html'}（注意双精度 @）

试试这些，让我们知道它们是否有效。

【讨论】：