Özel polimer öğesi

içinde kağıt açılır-kapanış olayını nasıl ele alabilirim? Kağıt açılır menüsünü kullandığım özel bir öğe oluşturuyorum. 'Seçilen öğe değişikliği' olayını ele almak istiyorum. Ancak, bir şekilde olay işleyicisini bulamıyor gibi görünüyor. Neyi yanlış yapıyorum? Kodum:Özel polimer öğesi

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

kaynak

2016-03-23 Abhijeet Kumar

Sen Polimer en Annotated event listener setup yılında on eksik, sen on-event kullanmak zorunda.

Yani sen accountChanged işlevinden paper-dropdown-menu ait value veya selectedItemLabel özelliklerini kullanmak gerekebilir seçilen maddelik detayları için on-paper-dropdown-close="accountChanged" yerine paper-dropdown-close="accountChanged(selectedItem)", Ve sonra kullanın. İşte

bir çalışma 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>

olduğunu

on-iron-select="accountChanged" da kolayca seçilen maddelik ayrıntıları erişebilmesi için, iyi bir seçenek olacaktır Bu durumda on-iron-select yılında kullanılabilir event.detail.item.

kaynak

2016-03-24 03:48:02

Özel polimer öğesi

cevap

İlgili konular