如何動態添加項目到聚合物紙樹？

Question

我在我的代碼中使用了聚合物紙樹元素。它使用靜態數據完美地顯示樹，但是當我嘗試動態添加項時，它不起作用。我在這裏附上截圖。 enter image description here

//數組

this.itemArray = {"name": "Project", 
               "icon": "theaters", 
               "open": true, 
               "children": [{ 
                "name": "Quotes", 
                "icon": "theaters", 
                "open": true, 
                "children": [{ 
                 "name": "Breaking Bad", 
                 "icon": "theaters" 
                }] 
               }, { 
                "name": "Templates", 
                "icon": "theaters", 
                "open": true, 
                "children": [{ 
                 "name": "Breaking Bad", 
                 "icon": "theaters" 
                }, { 
                 "name": "Game of Thrones", 
                 "icon": "theaters" 
                }] 
               }] 
             } 

    //Js code which accepts value from a text box and adds it to the array. 


this.$.additem.addEventListener("click", function(){ 

enter code herevar data = self.$.txtData.value; 
                      self.itemArray.children[1].children.push(
              {'name':data, 
              'icon':'theaters'}); 

              self.addData(self.itemArray,data); 
              self.$.txtData.value = " "; 


            }); 

// addData function 



addData:function(itemsarr){ 
         console.log("calling items array function",this.tree); 
         var tempArr = []; 
         tempArr = itemsarr; 
         if(this.tree){ 
         this.$.temp.removeChild(this.tree); 
         //tempArr = itemsarr; //= this.itemArray2; 
         } 

         this.tree = document.createElement('paper-tree-node'); 
         this.tree.setAttribute('id','treemenu'); 
         this.$.temp.appendChild(this.tree); 
         this.tree.data = tempArr; 
         console.log(tempArr); 

     } 

Answer 1

聚合物紙樹具有數據屬性。你只需要更新它。

幫助鏈接：https://github.com/vpusher/paper-tree/blob/master/paper-tree.html