InitListItems.js

Import Module

HTML Parts

Add Button

Adds a new list item to a list using a template.

Remove Button

Removed or hides a list item in a list.

Delete Input (optional)

When present in a list item, will cause the list item to be hidden instead of deleted. The input value is set to true as well.

Count Element (optional)

When present in a list item, will have the inner HTML replaced with the item count.

Template

An element containing one list item template. Only index is replaced as a token and the default is '{index}'.

List

An element containing list item children. While the example is a list-group, it can be any element with children.

List Item (JSP tag)

While it is not required, it is recommended to put the list item in a JSP tag file. This way it can be used in both the template and the list and be updated together.

Embeddable Collection Example

Phone Numbers

HTML

Standard Collection Example

Phone Numbers

HTML

Note: Notice how the input with the data-delete-input attribute is not in the template. This is done on purpose. There is no point in sending those values to the server just to have the server remember to remove it from the list.

Showing Counts

Phone Numbers 1

Phone Number 1

HTML

Changing the index token

Phone Numbers

HTML

InitListItems.js

Test Results

Import Module

HTML Parts

Add Button

Remove Button

Delete Input (optional)

Count Element (optional)

Template

List

List Item (JSP tag)

Embeddable Collection Example

Phone Numbers

Phone Numbers

Standard Collection Example

Phone Numbers

Phone Numbers

Showing Counts

Phone Numbers 1

Phone Numbers 1

Changing the index token

Phone Numbers

Phone Numbers