Merge pull request #4 from benbenbenbenbenben/master

lazy loading through dom-if
vpusher · Mar 8, 2017 · 3c4c7ec · 3c4c7ec
2 parents dbe1818 + 8758294
commit 3c4c7ec
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -206,11 +206,13 @@ <h3>Lazy loading demo</h3>
  template.onToggle = function(event) {
  var target = event.detail;
 
- !target.loaded && target.getChildren().forEach(function(child){
+ if (!target.loaded) {
  target.loaded = true;
- // Fetching children ...
- this.fetchChildren(child);
- }, this);
+ target.getChildren().forEach(function(child){
+ // Fetching children ...
+ this.fetchChildren(child);
+ }, this);
+ }
  },
 
  template.setLoadingState = function(node, enabled) {

diff --git a/demo/lazyloading.html b/demo/lazyloading.html
@@ -43,11 +43,13 @@ <h2>Lazy loading paper-tree demo</h2>
  template.onToggle = function(event) {
  var target = event.detail;
 
- !target.loaded && target.getChildren().forEach(function(child){
+ if (!target.loaded) {
  target.loaded = true;
- // Fetching children ...
- this.fetchChildren(child);
- }, this);
+ target.getChildren().forEach(function(child){
+ // Fetching children ...
+ this.fetchChildren(child);
+ }, this);
+ }
  },
 
  template.setLoadingState = function(node, enabled) {

diff --git a/paper-tree-node.html b/paper-tree-node.html
@@ -124,13 +124,15 @@
  </paper-menu-button>
  </template>
  </div>
- <ul hidden$={{!data.open}}>
- <template is="dom-repeat" items="{{data.children}}">
- <li>
- <paper-tree-node data="{{item}}" actions="{{actions}}"></paper-tree-node>
- </li>
- </template>
- </ul>
+ <template is="dom-if" if="{{data.open}}">
+ <ul>
+ <template is="dom-repeat" items="{{data.children}}">
+ <li>
+ <paper-tree-node data="{{item}}" actions="{{actions}}"></paper-tree-node>
+ </li>
+ </template>
+ </ul>
+ </template>
  </div>
  </template>
 
@@ -185,7 +187,6 @@
 
  /**
  * The `toggle` event is fired whenever a tree node is expanded or collapsed.
- * This event can be used by the host to lazy load grandchildren.
  *
  * @event toggle
  */
@@ -242,7 +243,7 @@
  */
  toggleChildren: function() {
  this.set("data.open", !this.data.open && this.data.children && this.data.children.length);
- this.fire("toggle", this);
+ setTimeout(this.fire.bind(this, "toggle", this));
  }
 
  });