Home

The Document Object Model (DOM) is an object oriented interface for interacting with HTML webpages and other XML documents. It's been made extremely popular by its use in JavaScript within the browser.

This project is built on top of PHP.Gt/Dom, and provides dynamic data binding to DOM Documents, document templating and reusable HTML components.

Why not just use DOM to manipulate the page?

The different layers of your application will ideally have a strong separation of concerns. This is typically broken down into three layers: the Model, View, and Controller layers - often referred to as MVC architecture. When referring to MVC, the Model can be described as the data within the application. The View is the HTML user interface. The Controller is the PHP application logic, and the Controller's job is to bind the data from the Model to the View.

Having a strong separation of concerns means the HTML view can be completely changed without having to change the PHP controller, and vice versa. Directly manipulating the DOM in your PHP code can lead to tightly coupling the PHP and HTML, meaning that a slight change to the HTML source will potentially break existing PHP code, and require updating the PHP every time the page is edited.

Binding data using the data attributes introduced by this project leads to highly readable, maintainable HTML view files that are loosely coupled to the PHP controller logic, meaning that the HTML structure could potentially completely change in layout, and the PHP logic would not need to be changed at all.

An example of what using this project looks like in your HTML:

<!-- 
extends=base-page

[vars]
title=Your order 
-->

<!--
The INI syntax at the start of an HTML file can be used to configure "partial" views.
You can quickly see that this page extends 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 with data-list so it repeats for every row of a data source -->
	<li data-list>
<!-- 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 completely separately to the PHP, promoting a strong separation of concerns. The entire HTML structure can change, without having to communicate this to PHP, as long as the data-bind:* and data-list attributes are applied to the appropriate elements. This is what's referred to as loosely coupled code - the page logic is loosely coupled to the page view, leading to highly maintainable systems.

---

To get started, read the overview.