Question

我正在创建一个自定义元素，我使用了纸张下拉菜单。我想处理选择的项目更改＆＃39;事件。但似乎无论如何它无法找到事件处理程序。我究竟做错了什么？我的代码：

<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

您错过了Polymer Annotated event listener setup中的on，您必须使用on-event。

因此，请使用on-paper-dropdown-close="accountChanged"代替paper-dropdown-close="accountChanged(selectedItem)"，然后使用所选项目详细信息您可能必须使用paper-dropdown-menu的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访问所选项目详细信息。

如何在我的自定义聚合物元素中处理纸张下拉关闭事件

1 个答案: