2017-09-06 15 views
0

Polymer 2.0のペーパードロップダウンメニューを使用して選択を行います。要素自体は、いくつかの外部の影響によって変化する可能性があります。その場合、表示された要素は更新されません。アイテムを変更した後にペーパードロップダウンメニューを更新するにはどうすればいいですか?

例:

<!doctype html> 
 
<html> 
 
<head> 
 
    <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
    <link rel="import" href="paper-button/paper-button.html"> 
 
    <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html"> 
 
    <link rel="import" href="paper-item/paper-item.html"> 
 
    <link rel="import" href="polymer/polymer-element.html"> 
 
    <link rel="import" href="paper-listbox/paper-listbox.html"> 
 
</head> 
 
<body> 
 

 

 
<dom-module id="my-element"> 
 

 
    <template> 
 
    <paper-dropdown-menu label="Dinosaurs"> 
 
     <paper-listbox slot="dropdown-content" selected="0"> 
 
     <template is="dom-repeat" items="[[_dinosaurs]]"> 
 
      <paper-item>[[item]]</paper-item> 
 
     </template> 
 
     </paper-listbox> 
 
    </paper-dropdown-menu> 
 
    <paper-button on-tap="changeList">Change List</paper-button> 
 
    </template> 
 

 

 
    <script> 
 
     HTMLImports.whenReady(function() { 
 
      class MyElement extends Polymer.Element { 
 
       static get is() { return 'my-element'; } 
 
       static get properties() { 
 
        return { 
 
         _dinosaurs: { 
 
          type: Array, 
 
          value: ['Initial entry :D No dinosaurs here :('] 
 
         } 
 
        }; 
 
       } 
 

 
       constructor() { 
 
        super(); 
 
        this.prop = 'my-element' 
 
       } 
 

 
       changeList() { 
 
        if (this._dinosaurs.length < 3) { 
 
         this.set('_dinosaurs', ['allosaurus', 'brontosaurus', 'carcharodontosaurus', 'diplodocus']); 
 
        } 
 
        else { 
 
         this.set('_dinosaurs', ['There is only T-Rex!']); 
 
        } 
 
       } 
 
      } 
 
      customElements.define(MyElement.is, MyElement); 
 
     }); 
 

 
    </script> 
 

 
</dom-module> 
 

 
<my-element></my-element> 
 

 
</body> 
 
</html>

紙リストボックスが最初に最初に選択された一つの元素が充填されています。 "Change List"ボタンが押されると、位置0の要素、すなわち現在の選択を含む、紙 - リストボックスの内容が変化する。ただし、表示されるテキストは同じです。リストボックスの要素が変更されたときに、表示された要素を更新するにはどうすればよいですか?

答えて

0

下記のattr-for-selectedの使用方法を参照してください。

<!doctype html> 
 
<html> 
 
<head> 
 
    <base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 
    <link rel="import" href="paper-button/paper-button.html"> 
 
    <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html"> 
 
    <link rel="import" href="paper-item/paper-item.html"> 
 
    <link rel="import" href="polymer/polymer-element.html"> 
 
    <link rel="import" href="paper-listbox/paper-listbox.html"> 
 
</head> 
 
<body> 
 

 

 
<dom-module id="my-element"> 
 

 
    <template> 
 
    <paper-dropdown-menu label="Dinosaurs"> 
 
     <paper-listbox slot="dropdown-content" attr-for-selected="item-name"> 
 
     <template is="dom-repeat" items="[[_dinosaurs]]"> 
 
      <paper-item item-name="[[item]]">[[item]]</paper-item> 
 
     </template> 
 
     </paper-listbox> 
 
    </paper-dropdown-menu> 
 
    <paper-button on-tap="changeList">Change List</paper-button> 
 
    </template> 
 

 

 
    <script> 
 
     HTMLImports.whenReady(function() { 
 
      class MyElement extends Polymer.Element { 
 
       static get is() { return 'my-element'; } 
 
       static get properties() { 
 
        return { 
 
         _dinosaurs: { 
 
          type: Array, 
 
          value: ['Initial entry :D No dinosaurs here :('] 
 
         } 
 
        }; 
 
       } 
 

 
       constructor() { 
 
        super(); 
 
        this.prop = 'my-element' 
 
       } 
 

 
       changeList() { 
 
        if (this._dinosaurs.length < 3) { 
 
         this.set('_dinosaurs', ['allosaurus', 'brontosaurus', 'carcharodontosaurus', 'diplodocus']); 
 
        } 
 
        else { 
 
         this.set('_dinosaurs', ['There is only T-Rex!']); 
 
        } 
 
       } 
 
      } 
 
      customElements.define(MyElement.is, MyElement); 
 
     }); 
 

 
    </script> 
 

 
</dom-module> 
 

 
<my-element></my-element> 
 

 
</body> 
 
</html>

+0

ことをありがとう。残念ながら、それは私の問題を解決しません。 attr-for-selectedを使用すると、関数が正しく理解されていれば、項目の名前もインデックス値として使用されます。しかし、私は古いインデックスを保持したい。したがって、私の例では、 'Initial entry ...'が表示され、 'Change List'をクリックすると、表示された選択が 'allosaurus'に変更されます。これはインデックス0の新しいアイテムです。メソッドが存在しない場合、ドロップダウンは単に以前の値を失います。 – Niels

関連する問題