ポリマーでバインドされたデータを動的に作成

Question

ポリマーを使用して動的フォームを作成したいと思います。つまり、ユーザーが「追加」ボタンを押すたびにフォームに新しいフィールドが追加されます。または、具体的には、paper-dropdown-menuを追加します。すべてのオプションは、ajaxコールで指定されたdom-repeatから取得します。

これは私がこれまで何をやったかである：

 <div id="filterContainer"> 
     <div class="flex rulesForm" id="filter1"> 
      <paper-dropdown-menu name="rule1A" no-label-float> 
      <paper-listbox attr-for-selected="value" selected="{{filter1A}}" class="dropdown-content" id="thirdPartyFilter1A"> 
       <template is="dom-repeat" items="{{rule1A}}"> 
       <paper-item value="[[item]]">[[item]]</paper-item> 
       </template> 
      </paper-listbox> 
      </paper-dropdown-menu> 
     </div> 
     </div> 
     <paper-button raised on-tap="addFilterField">Add</paper-button> 
    <div> 

とJSで：

addFilterField: function() { 
    let dropdown = document.createElement('paper-dropdown-menu'); 
    dropdown.name = ""; 
    dropdown.noLabelFloat = true; 
    let listbox = document.createElement('paper-listbox'); 
    listbox.class = "dropdown-content"; 
    listbox.attrForSelected = "value"; 
    listbox.selected = "{{filter1A}}"; 
    let paperItem = document.createElement('paper-item'); 
    paperItem.value = "[[item]]"; 
    var itemNode = document.createTextNode('[[item]]'); 
    paperItem.appendChild(itemNode); 
    listbox.appendChild(paperItem); 
    dropdown.appendChild(listbox); 
    console.log(dropdown); 
    filterContainer.appendChild(dropdown); 

私の問題は、データバインディングについてです...私は[とcreateTextNodeを使用している場合[item]]、それは単に文書中に文字列として書くだけです。これを修正する方法はありますか？ （またはフォームのフィールドを追加する簡単な解決策？）

Answer 1

まず第一にあなたはjavascriptでバインディング表記を使用することはできません。それはマークアップです

第2に、ポリマーはデータバインディングを動的に作成することをまだサポートしていません。しかし、私はあなたがしようとしていることを達成できると確信しています。

第3、 あなたはPolymer Dom APIを使用する必要があります。 https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api

の代わりに、paperItem.appendChild（itemNode）

あなたは

Polymer.dom（リストボックス）.appendChild（itemNode）を使用します。