diff --git a/example/multi-level-repeat/app.js b/example/multi-level-repeat/app.js
new file mode 100644
index 0000000..2859f4f
--- /dev/null
+++ b/example/multi-level-repeat/app.js
@@ -0,0 +1,44 @@
+
+Slim.tag('file-item',
+`Filename: [[file]][[generateLink(file, library)]]`,
+class extends Slim {
+ get useShadow() { return true; }
+ generateLink(data, library) {
+ return 'https://cdnjs.cloudfare.com/ajax/libs/' + library + '/' +
+ this.version + '/' + data;
+ }
+});
+
+Slim.tag('lib-asset',`
+Version: [[asset.version]]
+
+`,
+class LibAsset extends Slim {
+ get useShadow() { return true; }
+}
+);
+
+
+Slim.tag('lib-browser',`
+[[libraryData.name]]
+
+`, class LibBrowser extends Slim {
+ get useShadow() { return true; }
+ onBeforeCreated() {
+ this.libraryName = 'slim.js';
+ this.libraryData = {};
+ this.getData();
+ }
+
+ getData() {
+ fetch('https://api.cdnjs.com/libraries/' + this.libraryName)
+ .then(r => r.json())
+ .then( data => {
+ console.time('render');
+ this.libraryData = data;
+ console.timeEnd('render');
+ });
+ }
+});
\ No newline at end of file
diff --git a/example/multi-level-repeat/index.html b/example/multi-level-repeat/index.html
new file mode 100644
index 0000000..2a26a4d
--- /dev/null
+++ b/example/multi-level-repeat/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ Multiple levels repeat
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/example/stargazers/stargazers-demo.js b/example/stargazers/stargazers-demo.js
index 75c20db..4c0e449 100644
--- a/example/stargazers/stargazers-demo.js
+++ b/example/stargazers/stargazers-demo.js
@@ -28,16 +28,10 @@ Slim.tag('stargazers-demo',
window.unit = this;
this.repoName = 'eavichay/slim.js';
this.stargazers = [];
- this._avatarSize = 128;
+ this.avatarSize = 128;
this.isLoading = false;
}
- get avatarSize() { return this._avatarSize; }
- set avatarSize(value) {
- // console.log('Changing avatar size to ' + value);
- this._avatarSize = value;
- }
-
makeBig() {
console.time('makeBig');
this.avatarSize = 256;
diff --git a/example/tests/repeat-benchmark.html b/example/tests/repeat-benchmark.html
index c55fc0e..fe4d683 100644
--- a/example/tests/repeat-benchmark.html
+++ b/example/tests/repeat-benchmark.html
@@ -58,7 +58,7 @@
while (arr.length < ARR_LENGTH) {
const random = Math.random();
arr.push(random);
- let child = document.createElement('div');
+ const child = document.createElement('div');
child.innerText = random.toString();
el.appendChild(child);
}
diff --git a/src/Slim.js b/src/Slim.js
index 20a2e31..1f6c0fe 100644
--- a/src/Slim.js
+++ b/src/Slim.js
@@ -363,7 +363,7 @@ class Slim extends HTMLElement {
targets = descriptor.target.repeater.clones;
}
if (targets) {
- let sourceRef = descriptor.target._boundRepeaterParent;
+ let sourceRef = descriptor.target._boundRepeaterParent || descriptor.target._boundParent;
let value = Slim.__lookup((sourceRef || source), prop).obj || Slim.__lookup(descriptor.target, prop).obj;
const attrName = Slim.__dashToCamel(descriptor.attribute);
targets.forEach(target => {
@@ -408,7 +408,8 @@ class Slim extends HTMLElement {
}
} else if (descriptor.type === 'R') {
executor = () => {
- descriptor.repeater.renderList()
+ descriptor.repeater.registerForRender();
+ // !descriptor.repeater.isRendering && descriptor.repeater.renderList()
}
} else if (descriptor.type === 'W') {
executor = () => {
@@ -1028,7 +1029,7 @@ Slim.__initRepeater = function() {
if (!this.uq_index) {
this.createdCallback();
}
- this.renderList();
+ this.checkoutRender();
}
onRemoved() {
@@ -1066,6 +1067,9 @@ Slim.__initRepeater = function() {
element[targetPropName] = sourceData[idx];
element.data_index = idx;
element.data_source = sourceData;
+ if (element.isSlim) {
+ element.update();
+ }
});
if (clone.isSlim) {
clone.update();
@@ -1073,12 +1077,14 @@ Slim.__initRepeater = function() {
});
this.clones[0]._boundProperties && Object.keys(this.clones[0]._boundProperties).forEach( prop => {
try {
+ this.clones[0]._boundParent._executeBindings(prop.split('.')[0]);
this._boundParent._executeBindings(prop.split('.')[0]);
}
catch (err) { /* swallow error */ }
});
Slim.selectorToArr(this.clones[0], '*').forEach( element => {
try {
+ element._boundParent._executeBindings(prop.split('.')[0]);
this._boundParent._executeBindings(prop.split('.')[0]);
}
catch (err) { /* swallow error */ }
@@ -1087,11 +1093,17 @@ Slim.__initRepeater = function() {
}
renderList() {
- if (!this.sourceNode) return;
+ if (this.isRendering) return;
+ this.isRendering = true;
+ if (!this.sourceNode) {
+ this.isRendering = false;
+ return;
+ }
this.sourceData.registerSlimRepeater(this);
if (this.clones && this.clones.length === this.sourceData.length && this.sourceData.length > 0) {
this.updateExistingList();
+ this.isRendering = false;
return;
}
@@ -1101,16 +1113,19 @@ Slim.__initRepeater = function() {
Slim.removeChild(leftover);
});
this.updateExistingList();
+ this.isRendering = false;
return;
}
if (this.clones && this.clones.length < this.sourceData.length && this.clones.length > 0) {
this.updateExistingList();
let remaining = this.sourceData.slice(this.clones.length);
this.createItems(remaining);
+ this.isRendering = false;
return;
}
this.clearList();
this.createItems(this.sourceData);
+ this.isRendering = false;
}
createItems(sourceData) {