Полимер: загружать разные данные на модал в зависимости от того, на каком элементе щелкнули - PullRequest
Новая
       6

Полимер: загружать разные данные на модал в зависимости от того, на каком элементе щелкнули

0 голосов
/ 18 апреля 2019

Я реализую компонент на полимере, который будет отображать модальное значение при нажатии на некоторые его элементы. Поскольку он будет всегда представлять одну и ту же информацию, я хочу иметь только один модальный вместо одного для каждого элемента и изменять только данные, приведенные.

Мой 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', и я хочу представить ее в модальном режиме в зависимости от того, на какой элемент переключателя данных нажимает пользователь. Есть ли способ определить, на кого нажал пользователь?

EDITED - добавлен скрипт 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);
        }
    });
...