Home

Built on top of PHP.Gt/Dom, PHP.Gt/DomTemplate provides dynamic data binding to DOM Documents, document templating and reusable HTML components.

Directly manipulating the DOM in your code can lead to tightly coupling the logic and view. Binding data using custom elements and data attributes leads to highly readable, maintainable view files that are loosely coupled to the application logic.

An example of what this looks like in your HTML views:

<!-- 
extends=base-page

[vars]
title=Your order 
-->

<!-- the page is a "partial" view, extending the template provided by base-page.html -->

<h1>Your order</h1>

<!-- here is a custom element maintained in its own checkout-list.html -->
<checkout-list />

<p>The order total is <span data-bind:text="priceFormatted">£0.00</span></p>
<p>Items in your order:</p>
<ul>
<!-- the li is marked as a template, and repeats for every row of a data source -->
	<li data-template>
<!-- the content of the li is clearly marked to show what data to bind -->
		<span data-bind:text="name">Item Name</span>
		<span data-bind:text="priceFormatted">£0.00</span>
	</li>
</ul>

In the above example, the HTML can be maintained separately. The entire structure can change, without having to communicate this to PHP, as long as the data-bind:* and data-template attributes are applied to the appropriate elements. This is what's referred to as loosely coupled - the page logic is loosely coupled to the page view, leading to highly maintainable systems.

---

To get started, learn how to Bind data to HTML elements with data-bind attributes.