watoki/tempan

使用注解HTML的模板动画引擎,适用于PHP

v1.0 2014-11-07 12:39 UTC

This package is not auto-updated.

Last update: 2024-09-20 20:51:51 UTC


README

tempan 是一个模板引擎,它使用注解HTML来渲染视图模型提供的数据。

目的

该项目受到了 Iain Dooley 在 workingsoftware.com 上的文章的启发。在他的文章中,Iain 认为:“当我同时在同一个文件中看到超过一种编程语言或标记语言时,我就是在看意大利面代码。” 他指的是大多数模板引擎中将模板语言和HTML混合的情况。他建议应该使用HTML本身来承载在DOM级别上操作HTML所需的元数据。他称之为 模板动画,因此项目的名字也因此而来。

主要优势是模板与渲染引擎完全独立。与其创建一个包含各种花括号占位符的模板,标记看起来像这样

<div property="person">
	Name: <span property="name">John Wayne</span>
	Homepage: <a property="url" href="http://johnwayne.com">
		<span property="caption">johnwayne.com</span>
	</a>
</div>

property 属性引用视图模型下的字段名称。此属性也用于 属性资源描述框架RDFa,因此模板可以很容易地扩展为RDFa文档。

{
	"Person": {
		"name": "John Wayne",
		"url" : {
			"href": "http://johnwayne.com",
			"caption": "johnwayne.com"
		}
	}
}

主要功能

功能集包括条件、循环和动态值。这使得 tempan 既有紧凑性又强大。

注意:尽管JSON语法用于描述视图模型,但它们实际上是PHP对象或数组。

使用静态值替换内容

元素的文字内容和属性会被视图模型中匹配属性名的值所替换。

{ 
	"one": "Hello", 
	"two": { 
		"value": "World",
		"title": "Everyone"
	}
}

导致

<span property="one">Hello</span>
<span property="two" title="Everyone"><span property="value">World</span></span>

导航复杂数据

嵌套数据结构也可以遍历。要访问以下视图模型的内部数据

{
	"recipient": "World"
	"outer": {
		"inner": {
			"message": "Hello"
		}
	}
}

模板将是

<div property="outer">
	<span property="inner">
		<span property="message">Hello</span>
		<span property="recipient">World</span>
	</span>
</div>

属性的域不仅限于当前子模型,而且从包含模型中继承。在这个例子中,recipient 从模型的祖父模型继承。然而,属性的域仅限于当前模型。

使用动态值替换内容

引用的数据可以是方法的返回值或闭包。只有零参数的方法是可能的。闭包接收当前元素和 Animator 实例作为其参数。这样,变量可以按需生成,并且可以动态修改元素。

{
	"number": {
		"value": 2,
		"isMany": function (element, animator) { return this.value != 1 },
		"shorten": function (element, animator) { return element->getContent()->substr(0, 4); }
	}
}

可以与以下内容一起使用

<span property="number">
	<span property="value">2</span> car<span property="isMany">s</span>
	<span property="shorten">Some long string</span>
</span>

删除元素

如果值是 falsenull、空数组,相应的元素将被删除。如果值是 true,元素本身不会被修改,但它的子元素。未定义的属性将被忽略。

重复元素

如果字段的值是列表,则元素将为列表中的每个项目重复。

{
	"pets": {
		"isMany": true,
		"count": 2,
		"pet": [
			{ "name": "Cat" },
			{ "name": "Dog" }
		]
	}
}

在重复元素之前,将删除模板中元素的兄弟元素。因此,以下渲染结果也可以用作其模板。

<div rel="pets">
	<p>		
		I have <span property="count">2</span> pet<span property="isMany">s</span>
	</p>
	<ul>
		<li rel="pet">
			<span property="name">Cat</span>
		</li>
		<li rel="pet">
			<span property="name">Dog</span>
		</li>
	</ul>
</div>

安装

有三种选择。如果您已经有了 Composer,则可以使用

php composer.phar create-project watoki/tempan

来检出 tempan 作为独立项目(您还需要git和php)。要运行测试套件,请使用

cd tempan
phpunit

如果您还没有安装Composer,或者想安装不同的分支,可以使用以下方法:

git clone https://github.com/watoki/tempan.git
cd tempan
php install.php

要在自己的项目中使用它,请将以下行添加到您的composer.json文件中。

"require" : {
    "watoki/tempan" : "*"
},
"minimum-stability": "dev"

基本用法

有关所有功能和用法示例的完整描述,请查看spec文件夹中的测试用例。您可以在ComplexTest.php文件中找到一个使用所有基本功能的示例,该文件位于spec文件夹中。