Polymer 1.0 динамически добавляет опции в меню

Question

Привет, У меня возникают проблемы с получением меню для динамического добавления параметров. Идея состоит в том, что выбор первого меню определяет, что содержит второе меню. Я построил это до успешного использования без полимера. И он работает с полимером. выпадающий получает свой контент от json на основе выбора, dropdown two получает его содержимое также от json. Эта часть работает, проблема заключается в том, когда вы делаете выделение из раскрывающегося списка, а затем меняете его, выпадающее меню не удаляет старый выбор. Я получил эту работу в последний раз с функцией, которая сначала удаляет все выпадающие двое детей до повторного заполнения содержимого. Проблема с Polymer - это когда childNodes удаляются всплывающие разрывы, и никакие другие дети не могут быть добавлены посредством привязки данных. попробовал добавить native с простым JS, который заполняет меню, но дети не могут быть выбраны (из того, что я прочитал, это может быть ошибка). Также я считаю, что привязка данных к динамическим элементам также больше не работает. в любом случае вот что у меня есть:

<link rel="import" href="../../../bower_components/polymer/polymer.html"> 
<link rel="import" href="../../../bower_components/paper-material/paper-material.html"> 
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> 
<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html"> 
<link rel="import" href="../../../bower_components/paper-item/paper-item.html"> 
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html"> 
<link rel="import" href="../../../bower_components/paper-button/paper-button.html"> 
<link rel="import" href="../../../bower_components/iron-dropdown/demo/x-select.html"> 

<dom-module id="add-skill"> 
    <template> 
    <paper-material elevation="1"> 
     <paper-dropdown-menu id="ddMenu" attr-for-selected="value" > 
     <paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="_itemSelected"> 
      <template is="dom-repeat" items="{{vendorList}}"> 
      <paper-item id="vendorName" value="item">[[item]]</paper-item> 
      </template> 
     </paper-menu> 
     </paper-dropdown-menu> 

     <paper-dropdown-menu> 
     <paper-menu class="dropdown-content" id="certificationSelect" on-iron-select="_itemSelected"> 
     </paper-menu> 
     </paper-dropdown-menu> 

     <!-- testing ideas --> 
     <paper-dropdown-menu> 
     <paper-menu class="dropdown-content" id="test" on-iron-select="_itemSelected"> 
      <option extends="paper-item"> Option </option> 
      <option extends="paper-item"> Option1 </option> 
      <option extends="paper-item"> Option2 </option> 
     </paper-menu> 
     </paper-dropdown-menu> 

     <paper-button on-click="_deleteElement"> 
     Delete 
     </paper-button> 
    </paper-material> 
    <iron-ajax 
     id="vendorSubmit" 
     method="POST" 
     url="../../../addskill.php" 
     handle-as="json" 
     on-response="handleVendorResponse" 
     debounce-duration="300"> 
    </iron-ajax> 

    <iron-ajax 
     id="certificationSubmit" 
     method="POST" 
     url="../../../addskill.php" 
     handle-as="json" 
     on-response="handleCertificationResponse" 
     debounce-duration="300"> 
    </iron-ajax> 
    </template> 
    <script> 
    Polymer({ 
     is: 'add-skill', 
     ready: function() { 
     this.sendVendorRequest(); 
     this.vendorList = []; 
     this.certificationList = []; 
     }, 

     sendVendorRequest: function() { 
     var datalist = 'vendor=' + encodeURIComponent('1'); 
     //console.log('datalist: '+datalist); 
     this.$.vendorSubmit.body = datalist; 
     this.$.vendorSubmit.generateRequest(); 
     }, 

     handleVendorResponse: function(request) { 
     var response = request.detail.response; 

     for (var i = 0; i < response.length; i++) { 
      this.push('vendorList', response[i].name); 
     } 
     }, 

     vendorClick: function() { 
     var item = this.$; 
     //var itemx = this.$.vendorSelect.selectedItem.innerHTML; 
     //console.log(item); 
     //console.log(itemx); 
     }, 

     sendCertificationRequest: function(vendor) { 
     var datalist = 'vendorName=' + encodeURIComponent(vendor); 
     console.log('datalist: ' + datalist); 
     this.$.certificationSubmit.body = datalist; 
     this.$.certificationSubmit.generateRequest(); 
     }, 

     handleCertificationResponse: function(request) { 
     var response = request.detail.response; 

     //var vendorSelect = document.getElementById('vendorSelect'); 
     for (var i = 0; i < response.length; i++) { 

      this.push('certificationList', response[i].name); 
     } 

     console.log(this.certificationList); 
     }, 

     _itemSelected: function(e) { 
     var selectedItem = e.target.selectedItem; 
     if (selectedItem) { 
      this.sendCertificationRequest(selectedItem.innerText); 
      console.log("selected: " + selectedItem.innerText); 
     } 
     }, 

     _removeArray: function(arr) { 
     this.$.certificationList.remove(); 
     for (var i = 0; i < arr.length; i++) { 
      console.log(arr[i]); 
      arr.splice(0, i); 
      arr.pop(); 
     } 

     console.log(arr.length); 
     }, 

     _deleteElement: function() { 
     var element = document.getElementById('certificationSelect'); 

     while (element.firstChild) { 
      element.removeChild(element.firstChild); 
     } 
     }, 

     _createElement: function() { 
     var doc = document.querySelector('#test'); 
     var option = document.createElement('option'); 
     option.extends = "paper-item"; 
     option.innerHTML = "Option"; 
     doc.appendChild(option); 
     } 
    }); 
    </script> 
</dom-module> 

Любое руководство всегда ценится

Answer 1

Вот рабочая версия your JSBin, которая использует привязку данных и <template is="dom-repeat"> создавать новые, выбираемые <paper-item> элементы динамически.

Я не уверен, какие конкретные проблемы вы столкнулись с при использовании привязки к затоптать <paper-item> элементов данных, но главное, что нужно помнить в Polymer 1.0 является то, что, когда Вы изменяете Array (или Object), который связан к шаблону, вам необходимо использовать new helper methods (например, this.push('arrayName', newItem)), чтобы убедиться, что привязки обновлены.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <base href="http://element-party.xyz"> 
 
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="all-elements.html"> 
 
</head> 
 

 
<body> 
 
    <dom-module id="x-module"> 
 
    <template> 
 
     <paper-material elevation="1"> 
 
     <paper-dropdown-menu> 
 
      <paper-menu class="dropdown-content" on-iron-select="_itemSelected"> 
 
      <template is="dom-repeat" items="[[_menuItems]]"> 
 
       <paper-item>[[item]]</paper-item> 
 
      </template> 
 
      </paper-menu> 
 
     </paper-dropdown-menu> 
 
     <paper-button on-click="_createItem">Add</paper-button> 
 
     </paper-material> 
 
    </template> 
 

 
    <script> 
 
     Polymer({ 
 
     _createItem: function() { 
 
      this.push('_menuItems', 'New Option ' + this._menuItems.length); 
 
     }, 
 

 
     _itemSelected: function() { 
 
      console.log('Selected!'); 
 
     }, 
 

 
     ready: function() { 
 
      this._menuItems = ['First Initial Option', 'Second Initial Option']; 
 
     } 
 
     }); 
 
    </script> 
 
    </dom-module> 
 

 
    <x-module></x-module> 
 
</body> 
 

 
</html>