javascript - 动态设置 polymer 自定义元素事件处理程序

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>

到目前为止没有问题。但现在我想为这个新创建的按钮提供一个“点击”事件处理程序。我尝试简单地设置属性

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

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

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

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

并实例化元素

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

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

这可以做到吗？

Answer 1

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