QueryTemplates finally released

I’ve finally managed to release QueryTemplates, a pure HTML templating engine i’ve been working past months. There’re extensive examples which should allow anyone to easily understand the idea. Previously posted Pure HTML templates theory sums up some thoughts about this templating pattern. You can read more about new library on the wiki and there’s also an official blog. Feel free to post feedback.

plainTemplates – CSS driven templating engine

This post is deprecated and informations below are outdated. Please follow up to QueryTemplates and Pure HTML templates theory.

Introduction

plainTemplates is a PHP and JS library that aims to divide template into 2 separate layers:

1. CSS selectors driven data attaching mechanism
2. Plain HTML

It’s simply creates your templates from plain HTML files on-the-fly, filling it with data and fetching parts you like.

It’s basen on phpQuery – a jQuery port to PHP.

Pros

• True separation of data and visual layer
• HTML can be filled with example data
• High reusability (several templates from one HTML, one template from several HTMLs)
• Framework independed template organisation
• Transparent refreshes (including PHP code changes!)
• phpQuery integration
• No need to lear new, template-only language
• Saves a lot of time ;)

Cons

• You have to know CSS selectors (XPath will also help)
• In most cases you have to know jQuery/phpQuery
• You have to format data outside template (eg date).

Here is simple example, which inserts data from $data array into template in template.htm:

// get the class
require_once('../../plainTemplates/plainTemplates.php');
// always end dir with a slash
plainTemplates::$cacheDir = '../../plainTemplates/cache/';
$data = array(
	array(
		'title' => 'News 1 title',
		'body'	=> 'News 1 body',
	),
	array(
		'title' => 'News 2 title',
		'body'	=> 'News 2 body',
	),
	array(
		'title' => 'News 3',
		'body'	=> 'News 3 body',
	),
);
// include to fully preserve scope
include(
	plainTemplates::createTemplate(
		// first the template source
		'template.htm',
		// second the var info
		array(
			// var name in scope
			'$data',
			// and var value
			$data,
			// finally the selectors (of course there are defaults, that is UL and LI)
			array(
				'container' => '.someclass ul',
				'row'		=> 'li'
			)
		)
	)
);

Here is template.htm itself:

<div class='someclass'>
	<p>UL below will be container, and every LI will be searched agains classes with field names.</p>
	<ul>
		<li>

			<p>Only tags with field classes are replaced.</p>
			<p class='title'>This will be replaces by the title</p>
			<p class='body'>And this by the body...</p>
		</li>

		<li>
			Only first row will be in the result and this wont be considered by any chance... so You can use as many row examples as You want.
		</li>
	</ul>
</div>

Now the result’s source:

<ul><?php foreach( $data as $dataRow ): ?>

			<li>
			<p>Only tags with field classes are replaced.</p>
			<p class="title"><?php print $dataRow['title']; ?></p>
			<p class="body"><?php print $dataRow['body']; ?></p>

		</li><?php endforeach; ?></ul>

Those are the basics, it can do a lot more, but i think its good that it can do simple things in a simple way…