動的にテンプレート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

ad 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)を使用して、テンプレートの正しい更新を確実にします。

ad 2）これはデータバインディングを使用しても実現されます。まず、Arrayプロパティに上記のnotifyプロパティが必要です。第2に、各「stuff」オブジェクトはそれ自身の選択値を持つ必要があります。正しいデータ・バインディングを使用して、（バウンド紙-ドロップダウン-入力することによって）あなたの配列の値への変更は、それに応じて伝播されます。

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