Skip to content

Overview

Jump to bottom
Greg Bowler edited this page Jan 8, 2024 · 8 revisions

The functionality of DomTemplate is split into four categories. Use this quick list to briefly get an idea of what each function looks like in your code:

1. Bind data to HTML using data-bind attributes

Inject data from a source such as your database directly into the HTML in various ways.

HTML:

<p>Welcome back, <span data-bind:text="firstName">user</span>!</p>
<form>
	<label>
		<span>Set your status</span>
		<input name="status" data-bind:value="status" />
	</label>
</form>
function example(Binder $binder):void {
	$userData = [
		"firstName" => "Evgeniy",
		"lastName" => "Stepanov",
		"status" => "Building a Testing Framework for Distributed IDEs",
	];
	$binder->bindData($userData);
}

2. Bind lists of data to HTML using data-list attributes

<h1>Shopping list</h1>
<ul>
	<li data-list data-bind:text>Shopping list item</li>
</ul>
function example(Binder $binder):void {
	$shoppingList = ["Eggs", "Tomatoes", "Bread", "Milk"];
	$binder->bindList($shoppingList);
}

3. Use custom HTML elements to import fragments of HTML

<h3>Account details</h3>
<profile-selector />

4. Template pages

<!--
extends=base-template
[vars]
title=Your account
-->

<h3>Account details</h3>
<profile-selector />

Code examples in this guide

Throughout this guide, example code is provided as HTML and PHP snippets. All PHP code is enclosed within an example() function, and any objects that are used in the example are passed as a parameter to the function. If you're in the context of a WebEngine application, the example functions can be seen as your code's go() or do() functions.

To run the code examples locally, there is a need for some boilerplate code. Take a look at the examples directory for some pre-written scripts, or use the following as your boilerplate when running these examples:

function example(Binder $binder):void {
	// Your code here!
}

$html = <<<HTML
<!-- Put your page's HTML here -->
HTML;

$document = new HTMLDocument($html);
$binder = new DocumentBinder($document);

// Call the example function...
example($binder);
// ...then output the manipulated document.
echo $document;

In the next section we will learn how to bind data to HTML elements with data-bind attributes.

PHP.Gt/DomTemplate is a separately maintained component of PHP.Gt/WebEngine.

Binding data

HTML functionality

More information

Clone this wiki locally