Initializing help system before first use

Using Loops with Arrays and Sets

VDL provides a means of repeating a block of VDL content and looping around each element in an array or set..

The vdl-repeat attribute

Informally introduced in previous sections, the vdl-repeat attribute is placed on a VDL or HTML element to repeat that same element by iterating over a collection. 

<h1 vdl-repeat="=s in scenarios">This scenario is called 
		<span vdl-text="=s.name"></span>
</h1>
The correct syntax is =<variable> in <collection> where <variable> is a symbol of your choice that can be referenced by further VDL expressions, and <collection> is an array or other JavaScript collection.

The vdl-repeat attribute repeats the element it is attached to and any child content of the element. This is in contrast to the vdl-repeat-contents attribute, described next.

The vdl-repeat-contents attribute

The vdl-repeat-contents attribute has the same syntax as the vdl-repeat attribute. The difference is that it only repeats the child contents of the element it is attached to. 
<h1 vdl-repeat-contents="=num in [1,2,3]">
	<b vdl-text="=num"></b>
</h1>
In this case, using a plain JavaScript array, the output markup would resemble: 
<h1>
	<b>1></b>
	<b>2</b>
	<b>3</b>
</h1>
This has repeated the <b> element and its VDL-generated content obtained by iterating over the array using a local variable called num.

This technique is useful where you might wish to repeat several groups of elements without repeating the parent element, such as a pair of table cells for each iteration.

The Loop Index

Both vdl-repeat and vdl-repeat-contents can use a second variable which is populated with the index position of the current iteration around the loop. 
<h2 vdl-repeat="=num,idx in [10,20,30]">
	<p vdl-text="='num is: ' + num + ', idx is: ' + idx"></p>
</h2>
Loop indexes start at zero for the first item.

HTML ids in Loops

You should avoid using the HTML id attribute on any element within a loop. HTML ids should be unique within a page, whereas adding them to elements within a loop will cause the id to be duplicated.

Instead, try using an HTML class and use CSS selectors to target elements of that class - including using nth-child() selectors if necessary. The same advice applies to jQuery selectors if you are locating elements within a loop.

Nested Loops

Both vdl-repeat and vdl-repeat-contents can be nested multiple times. Just use care to ensure that unique variable names are used in the expression for the current collection item and the index variable if used.

Parent Topic Using VDL Expressions