From a013bad19a2861611ffa75795dda081c4e0b20c1 Mon Sep 17 00:00:00 2001
From: Matt Mo <matt@montoyatech.com>
Date: Wed, 21 Jul 2021 09:36:55 -0700
Subject: [PATCH] List template now passes index of item to ForEach.

---
 ignite-template.js | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/ignite-template.js b/ignite-template.js
index 49145ab..af14f76 100644
--- a/ignite-template.js
+++ b/ignite-template.js
@@ -1796,7 +1796,7 @@ class html extends IgniteTemplate {
 class list extends IgniteTemplate {
     /**
      * @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.
      */
     constructor(list, forEach, reflect = false) {
@@ -1869,16 +1869,21 @@ class list extends IgniteTemplate {
         //Construct all the items in our list and use the container
         if (this.list) {
             for (var i = 0; i < this.list.length; i++) {
-                var template = this.forEach(this.list[i]);
-                template.construct(parent, this.element);
+                var template = this.forEach(this.list[i], i);
+                if (template) {
+                    template.construct(parent, this.element);
 
-                //If we are reflecting, attach to the elements disconnect event.
-                if (this.reflecting) {
-                    this.reflectCallbacks.push(template.element.attachOnDisconnect(disconnect => this.onItemRemove(this.list[i])));
+                    //If we are reflecting, attach to the elements disconnect event.
+                    if (this.reflecting) {
+                        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 {
             items.forEach(item => {
-                var template = this.forEach(item);
+                var template = this.forEach(item, this.children.length);
 
                 if (this.elements.length > 0) {
                     template.construct(this.element.parentElement, this.elements[this.elements.length - 1].nextSibling);
@@ -1931,7 +1936,7 @@ class list extends IgniteTemplate {
         try {
             items.reverse();
             items.forEach(item => {
-                var template = this.forEach(item);
+                var template = this.forEach(item, 0);
 
                 if (this.elements.length > 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.
         if (items) {
             items.forEach(item => {
-                var template = this.forEach(item);
+                var template = this.forEach(item, start);
 
                 if (this.elements.length > 0) {
                     template.construct(this.element.parentElement, this.elements[start]);