dynamisch erstellen gebundene Daten mit Polymer

Question

Ich möchte eine dynamische Form mit Polymer erstellen, was bedeutet, dass jedes Mal, wenn der Benutzer auf "Hinzufügen" -Taste drücken, wird es ein neues Feld in das Formular hinzufügen. Oder, genauer, es wird ein hinzugefügt, wo alle Optionen von einem dom-repeat kommen, gespeist von einem Ajax-Aufruf.

das ist, was ich bisher getan habe:

 <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> 

und in der 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); 

mein Problem ist, über die Datenbindung ... Wenn ich mit verwenden createTextNode [ [item]], wird es einfach als String in das Dokument geschrieben. Gibt es eine Möglichkeit, das zu beheben? (oder eine einfachere Lösung zum Hinzufügen von Feld in einem Formular?)

Answer 1

vor allem können Sie nicht verbindliche Notation in Javascript verwenden. Es ist Markup

2. Polymer unterstützt noch nicht dynamisch erstellen Datenbindungen. Aber ich bin mir sicher, dass du erreichen kannst, was du versuchst.

3., müssen Sie die Polymer Dom API verwenden. https://www.polymer-project.org/1.0/docs/devguide/local-dom#dom-api

statt paperItem.appendChild (itemNode)

Sie

Polymer.dom (Listbox) .appendChild (itemNode) verwenden würde;