データバインディングを更新するときにdom-ifを変更する

Question

こんにちは、ポリマーに問題があります。menulistを作成しました。paper-menuを使用し、メニューはmenu-itemとsubmenu-itemで構成されています。問題は、menu-item（サブメニュー項目ではない）に子項目を追加しようとすると、その子が表示されないということです。私がsubmenu-itemに子を追加しようとすると、子が表示されます。私はdom-ifを使ってmenuとsub-menuを区別しています。メニュー項目に子を追加する方法

<paper-menu > 
<template id="menuListId" is="dom-repeat" items="{{menuList}}" as="menu" > 
    <template is="dom-if" if="{{_hasNoChild(menu)}}" restamp="true" dom-change> 
     <paper-item class="menu-trigger fancy"> 
     <div class="paper-item"> 
     <div class="child" style="width: 30px; margin-left: 0px;"> 
      <paper-checkbox></paper-checkbox> 
     </div> 
      <div class="child" style="width: 140px; margin-left: 0px;"> 
       {{menu.title}} 
      </div> 
       <div class="child"> 
       Name: {{menu.name}} </br> 
       Url: {{menu.url}} 
       </div> 
      <div class="child"> 
       Handler: {{menu.handler}}</br> 
       Icon: <img style="width:30px" src$="{{menu.icon}}" width="48"> 
      </div> 
      <div class="child"> 
       Status: {{menu.status}} 
      </div> 
      <div class="right"> 
      <paper-icon-button idx$="{{index}}" on-tap="fAddDialog" icon="add"></paper-icon-button> 
      <paper-icon-button idx$="{{index}}" on-tap="fEditDialog" icon="editor:mode-edit"></paper-icon-button> 
      <paper-icon-button idx$="{{index}}" on-tap="fDeleteDialog" icon="delete"></paper-icon-button> 
       </div> 
      </div> 
    </paper-item> 
    </template> 
    <template is="dom-if" if="{{_hasChild(menu)}}" restamp="true" dom-change> 
    <paper-submenu id="hasChild"> 
     <paper-item class="menu-trigger fancy"> 
     <div class="paper-item"> 
     <div class="child" style="width: 30px; margin-left: 0px;"> 
      <paper-checkbox></paper-checkbox> 
     </div> 
       <div class="child" style="width: 140px; margin-left: 0px;"> 
        {{menu.title}} 
       </div> 
        <div class="child"> 
        Name: {{menu.name}} </br> 
        Url: {{menu.url}} 
        </div> 
       <div class="child"> 
        Handler: {{menu.handler}}</br> 
        Icon: <img style="width:30px" src$="{{menu.icon}}" width="48"> 
       </div> 
       <div class="child"> 
        Status: {{menu.status}} 
       </div> 
       <div class="right"> 
       <paper-icon-button idx$="{{index}}" on-tap="fAddDialog" icon="add"></paper-icon-button> 
       <paper-icon-button idx$="{{index}}" on-tap="fEditDialog" icon="editor:mode-edit"></paper-icon-button> 
       <paper-icon-button idx$="{{index}}" on-tap="fDeleteDialog" icon="delete"></paper-icon-button> 
       </div> 
      </div> 
    </paper-item> 
    <paper-menu class="menu-content sublist"> 
     <menu-loop menulist="{{menu.childs}}"></menu-loop> 
    </paper-menu> 
    </paper-submenu> 
    </template> 
</template> 

<script> 
    Polymer({ 
     is: 'menu-page', 
     ready: function(){ 
      // this.$.paper-item.style.background-color = '#ababab'; 
     }, 
     properties: { 
      menuList: { 
       type: Array, 
       value: [] 
      }, 
      testList: { 
       type: Array, 
       value: [] 
      }, 
      index: Number 
     }, 
     _hasChild(a){ 
      // console.log(typeof a.childs); 
      return (typeof a.childs == 'object'); 
     }, 
     _hasNoChild(a){ 
      // console.log(typeof a.childs); 
     return !(typeof a.childs == 'object'); 
     }, 
     fAddDialog: function(e){ 
      this.index = e.target.getAttribute('idx'); 
      this.$.addDialog.open(); 
     }, 
     fEditDialog: function(e){ 
      this.index = e.target.getAttribute('idx'); 

      this.$.title_ed.value = this.menuList[this.index].title; 
      this.$.name_ed.value = this.menuList[this.index].name; 
      this.$.url_ed.value = this.menuList[this.index].url; 
      this.$.handler_ed.value = this.menuList[this.index].handler; 
      this.$.icon_ed.value = this.menuList[this.index].icon; 
      this.$.status_ed.value = this.menuList[this.index].status; 

      if(this.menuList[this.index].last_child == 'true'){ 
       this.$.lastChild_ed.checked = 'true'; 
      } 

      this.$.editDialog.open(); 
     }, 
     fDeleteDialog: function(e){ 
      this.index = e.target.getAttribute('idx'); 
      this.$.deleteDialog.open(); 
     }, 
     fCancelAddBtn: function(){ 
      this.$.addDialog.close(); 
      this.$.name.value = ''; 
      this.$.url.value = ''; 
      this.$.handler.value = ''; 
      this.$.icon.value = ''; 
      this.$.status.value = ''; 
      this.$.title.value = ''; 
      this.$.lastChild.checked = false; 
     }, 
     fCancelEditBtn: function(){ 
      if(this.menuList[this.index].last_child != 'true'){ 
       // this.$.lastChild_ed.checked = 'true'; 
       this.$.lastChild_ed.checked = false; 
      } 
      this.$.editDialog.close(); 
     }, 
     fAddBtn: function(){ 
      var name  = this.$.name.value; 
      var url   = this.$.url.value; 
      var handler = this.$.handler.value; 
      var icon  = this.$.icon.value; 
      var status = this.$.status.value; 
      var title  = this.$.title.value; 
      var lastChild = this.$.lastChild.checked; 

      var newList = { 
       'id'    : '43', 
       'id_parent' : this.index, 
       'title'   : title, 
       'name'   : name, 
       'url'    : url, 
       'handler'  : handler, 
       'icon'   : icon, 
       'status'  : status, 
       'last_child': lastChild 
      }; 

      if(this.menuList[this.index].childs == undefined){ 
       this.set("menuList."+this.index+".childs", []); 
      } 

      this.push("menuList."+this.index+".childs", newList); 
      this.$.addDialog.close(); 
      this.$.name.value = ''; 
      this.$.url.value = ''; 
      this.$.handler.value = ''; 
      this.$.icon.value = ''; 
      this.$.status.value = ''; 
      this.$.title.value = ''; 
      this.$.lastChild.checked = false; 
     }, 
     fEditBtn: function(){ 
      this.set("menuList."+this.index+".title", this.$.title_ed.value); 
      this.set("menuList."+this.index+".name", this.$.name_ed.value); 
      this.set("menuList."+this.index+".handler", this.$.handler_ed.value); 
      this.set("menuList."+this.index+".icon", this.$.icon_ed.value); 
      this.set("menuList."+this.index+".status", this.$.status_ed.value); 
      this.set("menuList."+this.index+".last_child", this.$.lastChild_ed.checked); 
      console.log(this.menuList[this.index].last_child); 
      this.$.editDialog.close(); 
     }, 
     fDeleteBtn: function(){ 
      this.splice('menuList', this.index, 1); 
     }, 
     handleResponse: function(){ 

     } 
    }); 
</script> 

それがサブメニューになっていますか？それを解決する方法を教えてください？

Answer 1

menuListを変更するコードは表示されません。使用することを確認してください

this.push('menuList', newItem); 

これは、あなたが配列を変更したことをPolymerに通知します。

余談点として、また、あなたのコード

if="{{!_hasChild(menu)}}" 

代わりの_hasNoChild機能でこれを使用することができます。