2

我创建了一个自定义元素（admin-button.html），其中包含以下代码：

<polymer-element name="admin-button">
  <template>
    <paper-item class="chip-container" hero-p>
      <div class="chip" hero-id="addPres" hero>
        <div class="chip-top" hero-id="addPres-art" hero></div>
        <div class="chip-bottom" cross-fade>
          <div class="chip-title-overlay" title="Create presentation"></div>
          <div class="chip-title">Create presentation</div>
        </div>
      </div>
    </paper-item>
  </template>
  <script>
    Polymer();
  </script>
</polymer-element>

在另一个本身是自定义元素的文件 (table-body.html) 中，我动态导入此文件，创建元素的实例并将其附加到菜单列表 (#chip-menu)，如下所示：

<script>
  var poly = this;

  Polymer.import(["elements/admin-button.html"], function() {
    var button = document.createElement("admin-button");
    poly.$.chipMenu.appendChild(button);
  });
</script>

到这里为止没有问题。但是现在我想给这个新创建的按钮一个“on-tap”事件处理程序。我试图简单地设置属性

button.setAttribute("on-tap", "{{ eventHandler }}");

但这不起作用 - 我怀疑它与正确注册元素有关，但我似乎找不到任何关于如何在聚合物文档中的自定义元素上动态设置事件处理程序的提示。

如果我像这样将元素硬编码到 HTML 中

<admin-button on-tap="{{ eventHandler}}"></admin>

并实例化元素

Polymer.import(["elements/admin-button.html"]);

有用。但我不想在页面加载的 HTML 代码中包含自定义元素。

这可以做到吗？

4

2 回答 2

3

试试button.addEventListener('tap',eventHandler);。

于 2015-04-02T11:12:34.443 回答
0

不是很清楚，但试试这个：

<polymer-element name="admin-button" attributes="eventHandler">
...
<paper-item class="chip-container" hero-p on-tap="{{ eventHandler}}">
...

于 2015-04-02T10:55:59.933 回答