폴리머로 바운드 데이터를 동적으로 생성합니다.

Question

폴리머를 사용하여 동적 폼을 만들고 싶습니다. 즉, 사용자가 "추가"버튼을 누를 때마다 폼에 새 필드가 추가됩니다. 또는 더 구체적으로는 paper-dropdown-menu을 추가합니다. 모든 옵션은 ayax 호출을 통해 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

먼저 바인딩 표기법을 자바 스크립트에서 사용할 수 없습니다. 그것은 마크 업입니다.

둘째로, 폴리머는 데이터 바인딩을 동적으로 생성하는 것을 아직 지원하지 않습니다. 그러나 나는 당신이하려고하는 것을 성취 할 수 있다고 확신합니다.

3 번째, Polymer Dom API를 사용해야합니다. 대신 paperItem.appendChild의 https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api

(itemNode)

당신이

Polymer.dom (목록 상자) .appendChild (itemNode)를 사용합니다;