javascript - 在 polymer 中声明事件

Question

我在 polymer 中声明了以下元素

<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')，您的代码就可以工作了。