如何在我的自定义聚合物元素中处理 paper-dropdown-close 事件

Question

我正在创建一个自定义元素，我在其中使用了 paper-dropdown--menu。我想处理 'selected item change' 事件。但似乎不知何故无法找到事件处理程序。我究竟做错了什么？我的代码：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<dom-module id="fund-transfer">
    <template>
        <style>
        :host {
            padding: 20px;
        }
        </style>
        <iron-ajax auto url={{accountServiceUrl}} handle-as="json" last-response="{{accounts}}"></iron-ajax>
        <div>
            <paper-dropdown-menu label="From Account" paper-dropdown-close="accountChanged(selectedItem)">
                <paper-listbox class="dropdown-content">
                    <template is="dom-repeat" items="[[accounts]]">
                        <paper-item>{{item.name}} - {{item.number}} </paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>
        </div>
        <div>
            <paper-dropdown-menu label="To Account" paper-dropdown-close="accountChanged(selectedItem)">
                <paper-listbox class="dropdown-content">
                    <template is="dom-repeat" items="[[accounts]]">
                        <paper-item>{{item.name}} - {{item.number}}</paper-item>
                    </template>
                </paper-listbox>
            </paper-dropdown-menu>
        </div>
    </template>
    <script>
    Polymer({
        is: 'fund-transfer',
        properties: {
            accountServiceUrl: String
        },
        ready: function() {
        },
        accountChanged: function(selectedItem) {
            alert('zinga');
            console.log('heehaa');
            console.log(selectedItem);

        }
    });
    </script>
</dom-module>

Answer 1

You are missing the on in Polymer's Annotated event listener setup, you have to use on-event.

所以使用on-paper-dropdown-close="accountChanged"而不是paper-dropdown-close="accountChanged(selectedItem)"，然后对于所选项目的详细信息您可能必须使用[=22=的value或selectedItemLabel属性] 来自 accountChanged 函数。

这是一个工作演示

<!DOCTYPE html>
<html>  
<head>

  <title>Paper-DropDown-Menu</title>
  
  <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.2.3/lib/">
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-item/paper-item.html">
  
</head>
<body class="fullbleed">

<custom-dropdown></custom-dropdown>

<dom-module is="custom-dropdown">
<template>
  <!-- use on-paper-dropdown-close OR on-iron-select -->
<paper-dropdown-menu label="Time" on-paper-dropdown-close="itemSelected">
  <paper-listbox class="dropdown-content" selected="0">
    <paper-item>Select One</paper-item>
    <paper-item>Select two</paper-item>
    <paper-item>Select Three</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

</template>

<script>
Polymer({
  is: 'custom-dropdown',
  itemSelected : function(e){
    alert(" closed");
  }
});
</script>

</dom-module>

</body>
</html>

on-iron-select="accountChanged" 也可以使用，在这种情况下 on-iron-select 是一个不错的选择，这样您就可以轻松地从 event.detail.item.

如何在我的自定义聚合物元素中处理 paper-dropdown-close 事件

How can I handle paper-dropdown-close event in my custom polymer element

paper-elements

polymer-1.0