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>

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

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

我在论坛中搜索其他帖子，我发现了这个：
Documentation 这个例子修改了模型中的项目，但没有DOM我需要的东西（切换我的铁塌陷元素）。

我对此表示感谢。

Answer 1

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

您可以将entries的某些值添加到<paper-button>和<iron-collapse>，也可以尝试从按钮点击事件中获取DomRepeatModel以找到正确的折叠。

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

<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ünterZöchbauer对此的帮助。

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

2 个答案: