ポリマー2.xの<iron-selector>の使用

デモをしようとしています<iron-selector>。デモでは、ユーザーがリストから新しい値を選択したときにコンソールにログを記録します。私は間違って何をしていますか？ポリマー2.xの<iron-selector>の使用

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>

出典

2017-09-11 Mowzer

あなたが結合双方向を使用する必要がrouteの値を変更するために。 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>

また、選択したプロパティの変更解雇されiron-selectorイベントのselected-changedを使用することができます。例：

<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); 
}

出典

2017-09-11 04:04:40 Ofisora

ポリマー2.xの<iron-selector>の使用

答えて

関連する問題