聚合物1.0 itemforeelement嵌套dom-repeat



例如,我有一个dom-repeat:

<template is="dom-repeat" id="rows" items="[[rows]]" as="row">
  <tr class="result-tb-row" closed$=[[row.closed]]>
    <td class="result-tb-data">
      <ul class="violation-list">
        <template id="rowItem" is="dom-repeat" items="[[row.items]]">
          <li on-click="click">[[item]]</li>
        </template>
      <ul>
    </td>
  </tr>
</template>

如果我想知道我点击的是哪一行,我可以这样写:

this.$.rows.itemForElement(event.target);

但是,如果我想获得与我点击的li对应的确切项目该怎么办?我该怎么做呢?我显然不能做this.$.rowItem.itemForElement(event.target),因为rowItem不是唯一的。

event.model.item似乎解决了这个特殊的问题。但是,如果您有双嵌套dom-repeat或更多,并且您想要获得中间层,那么您就不走运了。可能需要自己实现一个迭代器。双嵌套dom-repeat在表中经常发生。表已经是一个嵌套dom-repeat;如果您希望在表单元格中使用dom-repeat(您将会遇到这种情况),则会出现双嵌套dom-repeat。

实现迭代器并不难,只希望Polymer团队支持嵌套dom-repeat的更多方法,因为这是一个很棒的特性。

event.target保存了<li>的引用。

当您执行this.$.rowItem.itemForElement(event.target)时,名为rowItemdom-repeat是唯一的,并且它将查看属于该<li>的项目。

但是如果您只想要项目数据,您可以使用event.model.item,它包含对属于您单击的行的项目数据的引用。

这是一个完全有效的问题,我也面临着同样的情况。有人有解决办法吗?

我在e.model.__data__中找到了ID。但这感觉像一个hack

在这里。我用了几个应用程序才弄明白。

Polymer认为内部ID是动态创建的ID。因此,使用Polymer对动态id 的自动节点查找,您可以说:

this.$$('#rowItem').itemForElement(event.target)

如下所示:https://www.polymer-project.org/1.0/docs/devguide/local-dom.html node-finding

最新更新