Overview

DomTemplate falls into three ideas:

1. bind data into HTML,
2. repeat bits of HTML from lists of data,
3. compose whole pages from reusable pieces.

In this guide we will build those ideas up one at a time, starting with the smallest useful examples and then gradually moving into the more advanced behaviour.

1. Bind data to HTML elements

<p>Welcome back, <span data-bind:text="firstName">friend</span>!</p>
<input name="email" data-bind:value="email" />

$binder->bindData([
	"firstName" => "Ada",
	"email" => "ada@example.com",
]);

Here we can see the basic pattern of the library: the HTML already contains sensible defaults, and the binder only replaces the pieces we have marked.

2. Repeat markup from iterable data

<ul>
	<li data-list data-bind:text>Item</li>
</ul>

$binder->bindList([
	"Tea",
	"Milk",
	"Biscuits",
]);

If we do this, the original <li> is treated as a template and cloned once for each list item.

3. Inject partial values with placeholders

<a href="/user/{{id}}">View {{name ?? this user}}</a>

$binder->bindData([
	"id" => 210,
	"name" => "Cody",
]);

This is handy when we only want to replace part of an attribute or bit of text rather than the whole property.

4. Expand components

<profile-summary />

If there is a matching component file, DomTemplate will replace the contents of the custom element with that component's HTML.

5. Extend partial page templates

<!--
extends=base-page
[vars]
title=Orders
-->

<h1>Orders</h1>
<ul>
	<li data-list>
		<order-item data-bind:id="id" />
	</li>
</ul>

A partial template allows us to provide reusable outer page layout in a flexible way that can be extended in other pages.

Note

In WebEngine applications, the use of _header.html and _footer.html files might be simple enough for your page template needs - consider using this before reaching for partial page templates - it might be a simpler solution that works for you.

---

Now that we know what the library is for, move on to getting started so we can wire up a working binder.