[英]change dom-if when data binding update - polymer
嗨,我有聚合物出了問題,我已經建立一個menulist
使用paper-menu
,該菜單包含一個的menu-item
和submenu-item
。 問題是當我嘗試在menu-item
(而非子菜單項)中添加子項時,該子項沒有出現。 當我嘗試在submenu-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>
如何在菜單項中添加子項,然后將其變成子菜單? 請怎么解決呢?
您不會在更改menuList的位置顯示代碼。 確保您使用
this.push('menuList', newItem);
這將通知Polymer您已更改陣列。
順便說一句,您也可以在代碼中使用它
if="{{!_hasChild(menu)}}"
而不是_hasNoChild函數。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.