web component - Using <iron-selector> in Polymer 2.x -
i trying demo <iron-selector>. in demo, want log console when user selects new value list. doing wrong?
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> <base href="//polygit.org/polymer+:master/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer-element.html"> <link rel="import" href="iron-selector/iron-selector.html"> </head> <body> <dom-module id="my-el"> <template> <iron-selector selected="[[route]]"> <div>item 1</div> <div>item 2</div> <div>item 3</div> </iron-selector> </template> <script> class myel extends polymer.element { static is() { return 'my-el' } static properties() { return { route: { type: number, notify: true, observer: '_routechanged', }, }} constructor() { super(); } _routechanged(route) { console.log('route', route); } } customelements.define(myel.is, myel); </script> </dom-module> <my-el></my-el> </body> </html>
in order change value of route have use two-way binding. since iron-selector not able change value of route observer not being triggered.
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>js bin</title> <base href="//polygit.org/polymer+:master/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer-element.html"> <link rel="import" href="iron-selector/iron-selector.html"> </head> <body> <dom-module id="my-el"> <template> <style> .iron-selected{color:blue} </style> <p>route value using 2 way binding in iron-selector: [[route]] </p> <iron-selector selected="{{route}}"> <div>item 1</div> <div>item 2</div> <div>item 3</div> </iron-selector> <p>route value using 1 way binding in iron-selector: [[route]]</p> <iron-selector selected="[[route]]"> <div>item 1</div> <div>item 2</div> <div>item 3</div> </iron-selector> [iron-selector working cannot update value of route] </template> <script> class myel extends polymer.element { static is() { return 'my-el' } static properties() { return { route: { type: number, notify: true, observer: '_routechanged', }, } } constructor() { super(); } _routechanged(route) { console.log('route', route); } } customelements.define(myel.is, myel); </script> </dom-module> <my-el></my-el> </body> </html>you can use selected-changed of iron-selector event fired when selected property changes. example:
<iron-selector on-selected-changed="_onselectedchanged" selected="[[route]]"> <div>item 1</div> <div>item 2</div> <div>item 3</div> </iron-selector> _onselectedchanged(e){ console.log('route',e.detail.value); } 
Comments
Post a Comment