Arrays

You often want to render multiple similar objects, like the rows of a database table. This can be done by assigning an array of objects to a section in your template. Its content will be duplicated and rendered recursively for each item in the array. The special thing about arrays is, that you can access their length like a scalar object property.

Elements.render(`
	<h1>My {{friends.length}} friends</h1>
	{{#friends}}
		<p>{{firstname}} {{lastname}}</p>
	{{/friends}}
`, {
	friends: [{
		firstname: 'Alice',
		lastname: 'Applebloom',
	},{
		firstname: 'Bob',
		lastname: 'Brown',
	}],
});

<h1>My 2 friends</h1>
<p>Alice Applebloom</p>
<p>Bob Brown</p>

For rendering an array of scalars, you can also make use of the local context:

Elements.render(`
	<ul>
		{{#fruits}}
			<li>{{.}}</li>
		{{/fruits}}
	</ul>
`, {
	fruits: ['Apple', 'Banana', 'Orange'],
});

<ul>
	<li>Apple</li>
	<li>Banana</li>
	<li>Orange</li>
</ul>