聚合物：根据单击的元素在模态上加载不同的数据

Question

我正在聚合物上实现一个组件，当其某些元素被单击时，该组件将显示模式。因为它将始终表示相同的信息，所以我只希望每个元素只有一个模态，而不是一个模态，并且只更改给定的数据。

我的html组件就是这个：

<template>
    <div id="podium-box" class="row" style$="height: {{height}}px">
        <div class="col-md-4 step-container m-0 p-0">
            <div id="trophy-silver" class="trophy" data-toggle="modal" data-target="#myModal" title="Check event #2">
                ...
            </div>
        </div>
        <div class="col-md-4 step-container m-0 p-0">
            <div id="trophy-gold" class="trophy" data-toggle="modal" data-target="#myModal" title="Check event #1">
                ...
            </div>
        </div>
        <div class="col-md-4 step-container m-0 p-0">
            <div id="trophy-bronze" class="trophy" data-toggle="modal" data-target="#myModal" title="Check event #3">
                ...
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: hidden;">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content" style="height: fit-content;">
                <!-- Header -->
                <div class="modal-header">
                    <img src="img/first.svg" class="ml-3" style="height: 100%;">
                </div>
                <!-- Body -->
                <div class="modal-body" style$="height: {{height}}px" >
                    <div class="col-md-12">
                        <div class="content">
                            ...
                        </div>                        
                    </div>
                </div>
                <!-- Footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

我将信息存储在vars，'event1'，'event2'和'event3'上，我想在模式中表示一个，具体取决于哪个数据触发元素在用户上单击。有没有一种方法可以检测用户单击了哪个用户？

已编辑-添加了Polymer脚本

Polymer({
        is: 'podium-chart',
        properties: {
            data: {
                type: Object,
                observer: '_dataChanged'              
            },

            event1: {
                type: Object,
            },

            event2: {
                type: Object,
            },

            event3: {
                type: Object,
            },

            selectedEvent: {
                type: Object
            },

            height: {
                type: String,
                value: '400'
            },

            stylebg: {
                type: String,
                value: 'bg-navy'
            },

            nwords: {
                type: Number,
                value: 3
            },

            fields: {
              type: Array,
              value: function() { return []; }
            },

            filters: {
              type: Array,
              notify: true,
              value: function() { return []; }
            }
        },

        _dataChanged: function() {
            var that = this
            var hits = that.data.hits.hits
            hits.forEach(function(event) {
                if(event._id == "1"){
                    that.event1 = event._source
                }else if(event._id == "2"){
                    that.event2 = event._source
                }else{
                    that.event3 = event._source
                }
            })
        },

        getNWords: function(wordsArray) {
            var nwords = this.nwords
            return wordsArray.slice(0, nwords);
        }
    });