Polymer 1.0動態添加選項到菜單

Question

嗨我有一些麻煩，讓菜單動態添加選項。他們的想法是選擇第一個菜單決定第二個菜單包含的內容。我已經在沒有聚合物的情況下成功完成了。並且它與聚合物一起工作。下拉菜單根據選擇從json獲取內容，下拉菜單也從json獲取其內容。這部分工作，問題是當你從下拉列表中選擇一個然後改變它時，下拉兩個不會刪除舊的選擇。上次我使用了一個函數，它在重新填充內容之前首先刪除所有下拉菜單中的子項。問題與聚合物是一旦childNodes被刪除的下拉菜單中斷，並沒有其他孩子可以通過數據綁定添加。嘗試添加本機與普通的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>元素時成什麼具體問題，但在聚合物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>