聚合物:具有动态ID的开放模态

时间:2016-09-13 19:38:23

标签: javascript polymer

<dom-module id="profile-post">
--------------------------
<template>
    <paper-button onclick="friends[[post_id]].open()">Invite here</paper-button>
    <paper-dialog id="friends[[post_id]]" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
</template>
<dom-module>

我的应用中的其他文件调用profile-post

<template is="dom-repeat" items="{{ajaxResponse.objects}}" as="post">
    <div class="wall">
        <div id="new_post_here"></div>
        <profile-post
            photos      = "{{ post.photos }}"
            date        = "{{ post.date }}"
            message     = "{{ post.message }}"
            place_name  = "{{ post.place_name }}"
            post_id     = "{{ post.id }}"
            class       = "post">
        </profile-post>
    </div>
</template>

方括号中的所有值都是我自己的元素的属性。 Own-element有简单的模板,但是从我的应用程序的另一部分我在dom-repeat中调用这个元素。纸张对话框无法打开。

我以这种方式解决了这个问题:

             <paper-button id="bp[[post_id]]" onclick="friends[[post_id]].open()">Invite here</paper-button>
             <paper-dialog id="friends[[post_id]]" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>

    openMap: function (e) {
        console.log('openMap');
        if(e.target.id == ('bm'+this.post_id)){
            document.getElementById('map'+this.post_id).open();
        }else if(e.target.id == ('bp'+this.post_id)){
            document.getElementById('friends'+this.post_id).open();
        }
    }

但它不漂亮

1 个答案:

答案 0 :(得分:0)

你应该能够这样做:

<paper-button id="bp[[post_id]]" on-tap="_openDialog">Invite here</paper-button>
<paper-dialog id="friends[[post_id]]" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>


_openDialog: function(e) {
    this.$$('#friends'+e.target.id').open();
}