MontoyaTech/ignite-html
MontoyaTech/ignite-html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

List template now passes index of item to ForEach.

Browse Source
This commit is contained in:
Matt Mo 2021-07-21 09:36:55 -07:00
parent 0ae84fc73b
commit a013bad19a
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ignite-template.js
View File

@ -1796,7 +1796,7 @@ class html extends IgniteTemplate {
class list extends IgniteTemplate { class list extends IgniteTemplate {
/** /**
* @param {Array|IgniteProperty} list The list of items to construct within this template. * @param {Array|IgniteProperty} list The list of items to construct within this template.
* @param {Function} forEach A function that construct a template for an item from the list that is passed to it. * @param {Function} forEach A function that construct a template for an item from the list that is passed to it. The parameters are: item, index
* @param {Boolean} reflect If true any items removed from the DOM will be removed from the list if they exist. By default this is false. * @param {Boolean} reflect If true any items removed from the DOM will be removed from the list if they exist. By default this is false.
*/ */
constructor(list, forEach, reflect = false) { constructor(list, forEach, reflect = false) {
@ -1869,16 +1869,21 @@ class list extends IgniteTemplate {
//Construct all the items in our list and use the container //Construct all the items in our list and use the container
if (this.list) { if (this.list) {
for (var i = 0; i < this.list.length; i++) { for (var i = 0; i < this.list.length; i++) {
var template = this.forEach(this.list[i]); var template = this.forEach(this.list[i], i);
template.construct(parent, this.element); if (template) {
template.construct(parent, this.element);
//If we are reflecting, attach to the elements disconnect event. //If we are reflecting, attach to the elements disconnect event.
if (this.reflecting) { if (this.reflecting) {
this.reflectCallbacks.push(template.element.attachOnDisconnect(disconnect => this.onItemRemove(this.list[i]))); this.reflectCallbacks.push(template.element.attachOnDisconnect(disconnect => this.onItemRemove(this.list[i])));
}
this.children.push(template);
this.elements.push(template.element);
} else {
this.children.push(null);
this.elements.push(null);
} }
this.children.push(template);
this.elements.push(template.element);
} }
} }
} }
@ -1902,7 +1907,7 @@ class list extends IgniteTemplate {
try { try {
items.forEach(item => { items.forEach(item => {
var template = this.forEach(item); var template = this.forEach(item, this.children.length);
if (this.elements.length > 0) { if (this.elements.length > 0) {
template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling); template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling);
@ -1931,7 +1936,7 @@ class list extends IgniteTemplate {
try { try {
items.reverse(); items.reverse();
items.forEach(item => { items.forEach(item => {
var template = this.forEach(item); var template = this.forEach(item, 0);
if (this.elements.length > 0) { if (this.elements.length > 0) {
template.construct(this.element.parentElement, this.elements[0]); template.construct(this.element.parentElement, this.elements[0]);
@ -2008,7 +2013,7 @@ class list extends IgniteTemplate {
//Append any new items if there are any. //Append any new items if there are any.
if (items) { if (items) {
items.forEach(item => { items.forEach(item => {
var template = this.forEach(item); var template = this.forEach(item, start);
if (this.elements.length > 0) { if (this.elements.length > 0) {
template.construct(this.element.parentElement, this.elements[start]); template.construct(this.element.parentElement, this.elements[start]);