동적으로 템플리트 내에서 용지 드롭 다운 입력 추가 dom-repeat

Question

프로젝트에서 용지 드롭 다운 입력을 동적으로 추가하려고합니다. 그것은 다음과 같이 보일 것입니다 : stuff이 ATTR 이름과 이름이 같은 개체의 목록 인 list_values ATTR을 가진 객체가 될 것

<dom-module id="stuff-input-list"> 
<template> 

<template is="dom-repeat" items="[[stuffs]]" as="stuff_item"> 
    <paper-dropwdown-input label="[[stuff_item.name]]" items='{{stuff_item.list_values}}' filter-property="name"> 
    <template> 
     <template is="dom-repeat" items="[[items]]" as="stuff"> 
       <paper-item>[[stuff.value_name]]</paper-item> 
     </template> 
     </template> 
    </paper-dropwdown-input> 
</template> 

</template> 


<script> 

class StuffList extends Polymer.Element { 
      static get is() { 
       return 'stuff-input-list'; 
      } 

      static get properties() { 
       return { 

       }; 
      } 

      constructor() { 
       super(); 
       this.stuffs = { 
        [name:'Stuff 1', list_values: [{value_name: 'Hey'}] ], 
        [name:'Stuff 2', list_values: [{value_name: 'World'}] ], 
        [name:'Stuff 3', list_values: [{value_name: '!'}] ] 

       } 
      } 

      ready() { 
       super.ready(); 

       Polymer.RenderStatus.afterNextRender(this, function() { 

       }); 
      } 

     } 

     window.customElements.define(StuffList.is, StuffList); 

</script> 


</dom-module> 

.

문제 :

1) 현재 샘플 코드는 위의 문제 목록/paper-item 렌더링했다. 목록이 나타나기 전에 검색 입력을 입력해야합니다.

2) 대화 상자 형식으로 입력해야합니다. 내 문제는 지금은 각 반복에 대해 선택한 값을 반환하는 방법입니다? 각 항목에 대해 paper-dropdown-input이 있으면 쉽게 달성 할 수 있습니다. 그러나 동적으로 물건을 추가해야하기 때문에 dom-repeat에서이 작업을 수행해야합니다.

Answer 1

광고 1) 템플릿에 바인딩하려는 모든 데이터에 대해 properties을 만들어야합니다. 당신이 바로 그를 초기화 할 수 있지만, 당신의 초기화 코드는 모든 클래스/구성 요소 인스턴스 실행됩니다, 그래서 당신은 함수에 포장을 확인하십시오, 당신의 데이터를 비동기 적으로 가져올 수 일어나는 경우

static get properties() { 
    return { 
     stuffs: { 
      type: Array, 
      notify: true, 
      value:() => [{ 
       name:'Stuff 1', 
       list_values: [{value_name: 'Hey'}], 
       selected_value: null 
      }, { 
       name:'Stuff 2', 
       list_values: [{value_name: 'World'}], 
       selected_value: null 
      }, { 
       name:'Stuff 3', 
       list_values: [{value_name: '!'}], 
       selected_value: null 
      }] 
     } 
    }; 
} 

속성을 유지 (type 및 notify)을 사용하고 this.set('stuffs', data)을 사용하여 템플릿을 올바르게 업데이트하십시오.

광고 2) 데이터 바인딩을 사용하여이 작업을 수행 할 수도 있습니다. 먼저 Array 속성에 위의 notify 속성이 필요합니다. 둘째, 각각의 'stuff'객체는 자체 선택 값을 가져야합니다. 올바른 데이터 바인딩을 사용하면 바인딩 된 용지 드롭 다운 입력에 따라 배열 값을 수정하면 그에 따라 전파됩니다.

... 
<paper-dropwdown-input label="[[stuff_item.name]]" 
    selected-item="{{stuff_item.selected_value}}" 
    items='{{stuff_item.list_values}}' filter-property="value_name"> 
     ...