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

debugcn 发表于 Dev

阿披耶·库玛（Abhijeet kumar）

我正在创建一个自定义元素，在其中使用了下拉菜单。我想处理“选定项目更改”事件。但是似乎无法以某种方式找到事件处理程序。我究竟做错了什么？我的代码：

<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>

SG_

您缺少使用onPolymer的Annotated事件侦听器设置中的的功能，必须使用on-event。

因此，请使用on-paper-dropdown-close="accountChanged"而不是paper-dropdown-close="accountChanged(selectedItem)"，然后使用所选项目的详细信息，您可能必须使用该函数中的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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。