Wie kann ich Papier-Dropdown-schließen-Ereignis in meinem benutzerdefinierten Polymer-Element verarbeiten

Ich erstelle ein benutzerdefiniertes Element, wo ich Papier-Dropdown-Menü verwendet habe. Ich möchte das Ereignis "Ausgewähltes Element ändern" behandeln. Aber es scheint, dass es den Ereignishandler irgendwie nicht lokalisieren kann. Was mache ich falsch? Mein Code:Wie kann ich Papier-Dropdown-schließen-Ereignis in meinem benutzerdefinierten Polymer-Element verarbeiten

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

Quelle

2016-03-23 Abhijeet Kumar

Sie sind die on in Polymer des fehlenden Annotated event listener setup, haben Sie on-event zu verwenden.

verwenden So on-paper-dropdown-close="accountChanged" statt paper-dropdown-close="accountChanged(selectedItem)", und dann für die ausgewählten Punkt Details Sie haben value oder selectedItemLabel Attribute paper-dropdown-menu von der accountChanged Funktion zu verwenden.

ist hier eine funktionierende Demo

<!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" auch, on-iron-select wäre eine gute Option, in diesem Fall verwendet werden, so dass Sie leicht die ausgewählten Punkte Details zugreifen können aus die event.detail.item.

Quelle

2016-03-24 03:48:02

Wie kann ich Papier-Dropdown-schließen-Ereignis in meinem benutzerdefinierten Polymer-Element verarbeiten

Antwort

Verwandte Themen