运用 <iron-selector> 在Polymer 2.x中

Question

I am trying to demo <iron-selector> . 我正在尝试演示<iron-selector> 。 In the demo, I want to log to the console when the user selects a new value from the list. 在演示中，当用户从列表中选择新值时，我想登录到控制台。 What am I doing wrong? 我究竟做错了什么？

Here is the JSBin. 这是JSBin。

http://jsbin.com/ciceguqore/1/edit?html,console,output http://jsbin.com/ciceguqore/1/edit?html,console,output

 <!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 get is() { return 'my-el' } static get 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>

Answer 1

In order to change the value of route you have to use two-way binding. 为了更改route的值，您必须使用双向绑定。 Since iron-selector is not able to change the value of route the observer is not being triggered. 由于iron-selector无法更改route的值，因此不会触发观察者。

 <!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 two 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 one 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 is working but it cannot update the value of route] </template> <script> class MyEl extends Polymer.Element { static get is() { return 'my-el' } static get 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 also use selected-changed of iron-selector event which is fired when the selected property changes. 您还可以使用selected-changed的iron-selector事件，当选定属性更改时将触发该事件。 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);
}

运用 <iron-selector> 在Polymer 2.x中

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-09-11 04:04:40

运用 <iron-selector> 在Polymer 2.x中

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-09-11 04:04:40

解决方案1
1 已采纳 2017-09-11 04:04:40