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

【问题标题】：Dynamically setting polymer custom element event handler动态设置聚合物自定义元素事件处理程序
【发布时间】：2015-04-02 09:55:54
【问题描述】：

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

这个可以吗？

【问题讨论】：

您使用的是什么版本的 Polymer？我以前从未遇到过 Polymer.import，其他人也可能对此感到疑惑。您可能还想查看 addEventListener(...) 而不是 setAttribute(...)
我正在运行 0.5.5 版，我在这里找到了有关 Polymer.import 的提示：polymer-project.org/0.5/docs/polymer/helpers.html ...addEventListener 显然正在工作，我只是不能在父级中使用预定义的函数-似乎是元素，但必须编写一个匿名处理函数。
啊，那我主要在 Polymer Dart 世界工作。感谢您的链接，我很高兴现在一切都在为您工作。

标签： javascript event-handling polymer custom-element

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：