javascript - 数据绑定(bind)更新时更改 dom-if - polymer

Question

您好，我在 polymer 方面遇到问题，我使用paper-menu构建了菜单列表，该菜单由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

您没有显示更改菜单列表的代码。确保您使用

this.push('menuList', newItem);

这将通知 Polymer 您已更改数组。

顺便说一句，您也可以在代码中使用它

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

而不是 _hasNoChild 函数。