README

基于PHP.Gt/Dom构建，本项目提供了对DOM文档的动态数据绑定、文档模板和可重用HTML组件的支持。

直接在代码中操作DOM可能会导致逻辑和视图紧密耦合。使用自定义元素和数据属性绑定数据，可以生成易于阅读、维护的视图文件，这些文件与应用逻辑松散耦合。

示例用法：你好，你！

考虑一个包含输入元素的表单，用于输入你的名字。当表单提交时，页面应该通过你的名字来问候你。

在不提交表单的情况下，HTML将保持原样渲染，显示默认消息“你好，你！”。

源HTML (`name.html`)

下面的HTML显示了一个基本的“你好，你”消息，但由于data-bind:text属性，当表单提交时，PHP代码将提交的名字绑定到DOM的正确位置，向用户问候。

greeter.html:

<!doctype html>
<h1>
	Hello, <span data-bind:text="name-output">you</span>!
</h1>

<form>
	<input name="name" placeholder="Your name, please" required />
	<button>Submit</button>
</form>

PHP用于注入你的名字

<?php
$html = file_get_contents("greeter.html");
$document = new \Gt\Dom\HTMLDocument($html);

if($name = $_GET["name"]) {
	$binder = new \Gt\DomTemplate\DocumentBinder($document);
	$binder->bindKeyValue("name-output", $name);
}

echo $document;

示例用法：购物清单

在下面的示例中，定义了HTML的模板，使用data-template属性来指示LI应根据数据中的每个项目重复，使用data-bind:text属性来设置LI的textContent为数据中的每个项目的值。

注意：当绑定字符串数组（或Stringable对象）时，无需指定data-bind:text属性的绑定键，但在下一个示例中，您将看到如何使用更复杂的数据结构在模板元素的不同位置绑定数据。

shopping-list.html:

<!doctype html>
<h1>Shopping list</h1>
<ul>
	<li data-template data-bind:text>Item</li>
</ul>

PHP用于注入购物清单

$html = file_get_contents("shopping-list.html");
$document = new \Gt\Dom\HTMLDocument($html);

$shoppingList = [
	"Pasta",
	"Rice",
	"Butter",
	"Eggs",
	"Vegetables",
];

$binder = new \Gt\DomTemplate\DocumentBinder($document);
$binder->bindList($shoppingList);
// this removes the data-bind and data-template attributes:
$binder->cleanupDocument(); 
echo $document;

输出

<!doctype html>
<h1>Shopping list</h1>
<ul>
	<li>Pasta</li>
	<li>Rice</li>
	<li>Butter</li>
	<li>Eggs</li>
	<li>Vegetables</li>
</ul>

高级用法：直接将数据库结果绑定到页面

在下面的示例中，使用data-template属性来为数据集中的每个结果重复LI。此数据集代表通常来自数据库查询或API的数据，但在这个示例中我们只是硬编码数据。

在LI中，您可以看到各种字段将绑定在哪里

周围的锚点元素的href属性注入了用户的ID。
IMG的src和alt属性注入了用户名。
IMG的alt属性注入了用户名。
H2和H3元素将其textContent设置为用户名和类型字段。

请注意，HTML的实际结构可以随时更改，只是data-bind和花括号的使用定义了数据绑定到何处。

user-list.html:

<!doctype html>
<h1>Users</h1>
<ul>
	<li data-template>
		<a href="/user/settings/{{id}}">
			<img src="/img/user/{{username}}.jpg" 
				alt="Profile image for {{username}}" />
			<h2 data-bind:text="username">username</h2>
			<h3 data-bind:text="type">user type</h3>
		</a>
	</li>
</ul>

PHP用于注入列表

// The $data could be from a database, or any other source.
// For now, we're just hard-coding the data, so we can see its structure.
$data = [
	[
		"id" => 123,
		"username" => "codyboy",
		"type" => "user",
	],
	[
		"id" => 456,
		"username" => "scarlett",
		"type" => "user",
	],
	[
		"id" => 789,
		"username" => "greg",
		"type" => "owner",
	],
];

$html = file_get_contents("user-list.html");
$document = new \Gt\Dom\HTMLDocument($html);
$binder = new \Gt\DomTemplate\DocumentBinder($document);

$binder->bindList($data);
$binder->cleanupDocument();
echo $document;

输出

<!doctype html>
<h1>Users</h1>
<ul>
	<li>
		<a href="/user/settings/123">
			<img src="/img/user/codyboy.jpg" 
				alt="Profile image for codyboy" />
			<h2>codyboy</h2>
			<h3>user</h3>
		</a>
	</li>
	<li>
		<a href="/user/settings/456">
			<img src="/img/user/scarlett.jpg"
				alt="Profile image for scarlett" />
			<h2>scarlett</h2>
			<h3>user</h3>
		</a>
	</li>
	<li>
		<a href="/user/settings/789">
			<img src="/img/user/greg.jpg"
				alt="Profile image for greg" />
			<h2>greg</h2>
			<h3>owner</h3>
		</a>
	</li>
</ul>

功能一览

动态数据的绑定 - 绑定键值对、关联数组、关联数组的列表以及嵌套列表。
HTML组件 - 通过将单独的组件存储在其自己的HTML文件中，并使用自定义HTML标签来包含它们，来组织和重用DOM树。
页面模板 - 创建扩展其他HTML文档的部分HTML文档。
通过选择它们的自定义标签名称，轻松地模块化CSS。

phpgt / domtemplate

维护者

详细信息

README

示例用法：你好，你！

源HTML (`name.html`)

PHP用于注入你的名字

示例用法：购物清单

PHP用于注入购物清单

输出

高级用法：直接将数据库结果绑定到页面

PHP用于注入列表

输出

功能一览

phpgt / domtemplate

维护者

详细信息

README

示例用法：你好，你！

源HTML (name.html)

PHP用于注入你的名字

示例用法：购物清单

PHP用于注入购物清单

输出

高级用法：直接将数据库结果绑定到页面

PHP用于注入列表

输出

功能一览

源HTML (`name.html`)