Question

我在聚合物

中声明了以下元素

<polymer-element name="Map-List-Element" attributes="mapName recordId">
    <template>
        <style>
            :host {
                display: block;
                position: relative;
                background-color:#fff;
                padding: 20px;
                font-family: 'Roboto';
                font-size:14px;
                font-weight:400;
                margin-bottom:10px;
                border: 1px solid #ddd;

            }
            core-label {
                margin-bottom:20px;
                display:block;
            }
            core-icon {
                color:#A0A0A0;
                margin-right:10px;
                cursor:pointer;
            }
        </style>
        <core-label>{{mapName}}</core-label>
        <span flex></span>
        <core-icon-button icon="av:play-arrow"></core-icon-button>
        <core-icon icon="settings" on-tap="{{settingsClicked}}"></core-icon>
        <core-icon icon="delete"></core-icon>
        <content/>
    </template>
    <script>
        Polymer({
            mapName: "",
            recordId: 0,
            settingsClicked: function (event, detail, sender) {
                this.fire('show-Settings', { recordId: this.recordId, mapName: this.name });
            }
        });
    </script>
</polymer-element>

这又由以下自定义元素

调用

<link rel="import" href="elements.html" />
<link rel="import" href="Map-List-Element.html" />
<polymer-element name="Map-List">
    <template>
        <template repeat="{{m in response.data}}">
            <map-list-element mapname="{{m.mapName}}" recordid="{{m.Id}}" on-show-settings="{{showSettings}}">
            </map-list-element> 
        </template>
        <core-ajax id="ajax"
                   auto=true
                   method="POST"
                   url="/RoutingMapHandler.php?Command=retrieve&Id=all"
                   response="{{response}}"
                   handleas="json"
                   on-core-error="{{handleError}}" 
                   on-core-response="{{handleResponse}}">
        </core-ajax>

    </template>
    <script>
        Polymer('Map-List', {
            created: function () {
            },

            handleError: function (event, detail, sender) {
            },

            handleResponse: function (event,detail,sender) {
            },
            showSettings: function (event, detail, sender) {
                alert('Fired showSettings');
            }
        });
    </script>
</polymer-element>

当我点击带有设置图标的核心图标时，它会调用'settingsClicked'功能。未调用包含另一个警报的Map-List元素中的“事件处理程序” - 未显示“showSettings”中的警报。

因此，给定Map-Element元素中声明的事件，如何在Map-List中创建事件处理程序？

Answer 1

您的事件处理程序声明是正确的（on-show-settings="{{showSettings}}"和相应的函数）。

但是你在fire语句中输入了一个拼写错误。事件名称必须全部小写。因此，将this.fire('show-Settings'替换为this.fire('show-settings'，您的代码就可以使用。

在聚合物中声明事件

1 个答案: