Here is my code snippet to bind a tree in the Office->Team->"user" hierarchy. The main requirement is to enable user search functionality.
To bind the tree, I have processed the users array to fit the required hierarchy. For searching, I filter out the users not in the users array and rebuild the tree. Initially, the search operation works fine. However, after entering the next character, the users list is not being excluded from the tree. The generateTree contains valid data when the next character is entered.
I suspect that Polymer is not performing dirty checking until the array is empty. Since the binding needs to be done in the Users Array, which is within the Teams Array, that is within the Offices Array. Any help in resolving this issue would be appreciated.
<template id="template" is="dom-repeat" items="{{generateTree}}" as="offices" id="user-level1-items">
<paper-submenu id="user-level1" SearchEnabled="{{search}}" class$="{{search}}">
<paper-item class="menu-trigger menu-level-1">
<iron-icon class$="{{offices.icon}}" icon="{{offices.icon}}"></iron-icon>
<span>{{offices.name}}</span></paper-item>
<paper-menu class="menu-content">
<template is="dom-repeat" items="{{offices.Teams}}" as="Teams" id="user-level2-items">
<paper-submenu id="user-level2" opened="{{Teams.open}}">
<paper-item class="menu-trigger menu-level-2">
<iron-icon class$="{{Teams.icon}}" icon="{{Teams.icon}}"></iron-icon>
<span>{{Teams.name}}</span>
</paper-item>
<paper-menu class="menu-content" id="user-level3">
<template is="dom-repeat" items="{{Teams.Users}}" as="Users">
<paper-item " value$="{{Users._id}}"
class="menu-level-3">
<abc>{{Users.fullname}}</abc>
</paper-item>
</template>
</paper-menu>
</paper-submenu>
</template>
</paper-menu>
</paper-submenu>
</template>
Polymer({
is: 'sa-org-tree-dynamic',
properties: {
level: {
type: Number,
value: 0
}
},
inputData:function(){
this.notifyPath('this.generateTree.teams.0.Users.*');
}
ready: function() {
}
});
this.generatetree is obtained from the parent element.