动态设置聚合物自定义元素事件处理程序

Question

我创建了一个自定义元素 (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 代码中包含自定义元素。

这可以做到吗？

Answer 1

不太清楚，但试试这个：

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

Answer 2

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

动态设置聚合物自定义元素事件处理程序

Dynamically setting polymer custom element event handler

javascript

event-handling

polymer

custom-element