2017-09-06 10 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>

용지리스트 박스는 처음에 초기에 선택된 하나 개의 원소로 채워진다. "목록 변경"버튼을 누르면 위치 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를 사용하면 함수를 올바르게 이해하면 항목의 이름도 색인 값으로 사용됩니다. 그러나 이전 색인을 유지하고 싶습니다. 예를 들어 '초기 항목 ...'이 표시되고 '목록 변경'을 클릭하면 표시된 항목이 'allosaurus'로 바뀌고 색인 0을 가진 새 항목이므로 변경하고 싶습니다. 메서드가 있으면 드롭 다운은 더 이상 존재하지 않으면 이전 값을 잃어 버립니다. – Niels