Question

是否可以获取将从<template repeat>呈现的元素？

我有一个名为poly-list的组件，在下面实现：

<poly-list dataList="{{ data.in }}" id="inList"
                           style="overflow: hidden; min-width: 324px; display: inline-block;">
                    <template>
                        <div> <!-- on-click event here -->
                            <paper-input-no-error value="{{ [0] }}"
                                                  class="in-paper-input"
                                                  on-change="{{ inChanged }}" id="0"></paper-input-no-error>

                            <paper-input-no-error value="{{ [1] }}"
                                                  class="in-paper-input"
                                                  placeholder="Value" id="1"></paper-input-no-error>
                        </div>
                    </template>
                </poly-list>

然后我在domReady回调中激活模板：

this.template.model = this.data;
this.template.setAttribute('repeat', '');

我需要一种方法来获取模板将放入DOM的每个单独元素。我需要这样做，以便为每个呈现的组件添加一个事件监听器。我还希望将其封装在我的多列表组件中，因此实现多列表的组件不需要设置事件本身。

我需要将事件添加到模板重复中的顶级元素。在这种情况下，它是div。我在上面的代码中评论了我的意思。事件冒泡可能有效但不可重复使用，因为我不知道元素将如何触发事件，因此无法说顶层元素总是上面的1个父元素，如上例所示。

是否有一个事件会在呈现每个元素或类似的东西时返回它们？

Answer 1

“是否可以获取将从模板重生的元素重复？”

是的，但仅在模板重复完成后。然后，您可以通过自动节点查找选择元素：this。$

这里有一个例子：How can I know that Template Repeat has finished?

Answer 2

你不能只使用Polymer的声明性事件绑定吗？

<poly-list ...>
  <template>
    <div on-click="{{ clickHandler }}">
      <paper-input-no-error ...></paper-input-no-error>

      <paper-input-no-error ...></paper-input-no-error>
    </div>
  </template>
</poly-list>

（在你的外部元素上使用一种名为clickHandler的原型的方法）

关于冒泡，可能有一些方式，你可以让它工作。

将事件绑定到模板重复中的元素

2 个答案: