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）中，它本身就是一个自定义元素，我动态导入该文件，创建元素的实例并将其附加到菜单列表（#chile-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

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

Answer 2

不太清楚，但试试这个：

＆＃13;

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

＆＃13;

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

2 个答案: