在 dom-repeat 模板内的纸按钮中执行事件

Question

我有以下元素：

<dom-module id="my-blogentry">
<template>
    <style>
        :host {
            display: block;
        }
        .div-general{
      </style>
    <div class="div-general">
        <template is="dom-repeat" items="{{entries}}">
            <paper-material elevation="1" animated="true" class="paper-material-presentation">
                <div class="div-date-left">
                    <span>{{item.date}}</span>
                </div>
                <div>
                    <iron-image src$="../../images/{{item.image}}" style="width:128px; height:128px;" sizing="cover"></iron-image>
                    {{item.resume}} 
                    <paper-button id="bt_readmore" on-tap="toggle">Read More</paper-button>
                    <iron-collapse id="collapse">
                      <div>{{item.content}}</div>
                    </iron-collapse>
                </div>
            </paper-material>
        </template>
    </div>
</template>
<script>
    Polymer({
        is: 'my-blogentry',

        ready: function() {
            this.entries = [
                {id: '1', title: ‘xxx.', date: 'Tuesday, March 8, 2016', image:'im-blogdefault.png', resume:’xxx’,content:’xxxx’}
            ];
          },

        toggle: function () {
            this.$$('#collapse').toggle();
        }
    });

</script>

如果您可以查看元素代码，我在 <template dom-repeat> 中有一个 iron-collapse 元素和一个按钮。我的建议是用户可以点击按钮并切换按钮以打开折叠元素。

问题是我的代码在打开第一个项目时工作正常，但是当我在列表中有更多项目并且我按下第二个项目按钮时，第一个和第二个折叠也打开了。

我正在搜索论坛中的其他帖子，我发现了这个：
Documentation 这个例子修改了模型中的项目，但没有 DOM 它是我需要的（切换我的 iron-collapse 元素）。

如有任何帮助，我将不胜感激。

Answer 1

这是因为在您的代码中所有 <iron-collapse> 得到相同的 id="collapse"。

您可以将 entries 中的一些值添加到 <paper-button> 和 <iron-collapse> 中，或者尝试从按钮单击事件中获取 DomRepeatModel 以找到正确的值崩溃。

使用来自 entries 的唯一 id 属性的示例代码（我假设它有一个）：

<paper-button ident$="{{entries.id}}" on-tap="toggle">Read More</paper-button>
<iron-collapse ident$="{{entried.is}}">

    toggle: function (event) {
        this.$$('[ident="' + event.target.getAttribute('ident') + '"]').toggle();
    }

Answer 2

这是解决方案，我将id分配给了铁塌陷标识符，关键是在id属性中使用符号$：

<template is="dom-repeat" items="{{entries}}">
            <paper-material elevation="1" animated="true" class="paper-material-presentation">
                <div class="div-date-left">
                    <span>{{item.date}}</span>
                </div>
                <div class="div-entry-resume">
                    <iron-image src$="../../images/{{item.image}}" style="width:128px; height:128px;" sizing="cover"></iron-image>
                    {{item.resume}} 
                    <iron-collapse id$="collapse{{item.id}}">
                      <div>{{item.content}}</div>
                    </iron-collapse>
                    <div class="div-entry-bottom">
                        <paper-button id$="bt_readmore" on-tap="toggle">Read More</paper-button>
                    </div>
                </div>
            </paper-material>
        </template>

和聚合物函数：

toggle: function (event, detail, sender) {
            var id = event.model.item.id;
            var selector = '#collapse' + id;
            this.$$(selector).toggle();
        }

感谢@Günter Zöchbauer 在这方面的帮助。

在 dom-repeat 模板内的纸按钮中执行事件

Perform event in the paper-button inside a dom-repeat template

javascript

polymer-1.0