phpgt/domtemplate

将动态数据绑定到可重用的HTML组件。

维护者

详细信息

github.com/PhpGt/DomTemplate

源代码

问题

资助包维护！
PhpGt

安装量: 6 338

依赖项: 2

建议者: 0

安全性: 0

星标: 17

关注者: 5

分支: 4

开放问题: 24

v3.4.1 2024-04-28 19:26 UTC

Requires

Requires (Dev)

MIT 406b261ef4607a6e63746623aa6c323c6b745ae0

This package is auto-updated.

Last update: 2024-09-12 15:33:18 UTC

README

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

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

Build status Code quality Code coverage Current version PHP.G/DomTemplate documentation

示例用法：你好，你！

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

在未提交表单的情况下，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文档。
  • 通过选择它们的自定义标签名，轻松模块化CSS。