My favorites | Sign in
Project Logo
Project Home
  
Downloads
  
Wiki
  
Issues
  
Source
    
Summary | Updates | People
Code license: MIT License
Labels: templates, php, dom, html, xml, server, mvc, javascript, jquery, CodeGenerator, css, views, server-side, client-side, web
Links:
Blogs:
Feeds:
Groups:
People details
Project owners:
  tobiasz.cudnik

QueryTemplates

DOM and CSS driven template engine

PHP based templating engine converting pure markup sources (HTML, XML, XHTML) into native ("compiled") PHP and JavaScript template files, while source files remains untouched.

Library uses popular web 2.0 pattern load-traverse-modify thou jQuery-like chainable API (using phpQuery) and provides several rapid data injection methods.

Download

News

Getting Started

Features

Syntax

QueryTemplates introduces following method types to jQuery syntax:

Documentation

Wiki

Example

Instead of writing this way in PHP (Smarty example) 

{if $error ne ""}
  <tr>
    <td bgcolor="yellow" colspan="2">
      {if $error eq "name_empty"}You must supply a name.
      {elseif $error eq "comment_empty"} You must supply a comment.
      {/if}
    </td>
  </tr>
{/if}

Instead of writing in same-typeof-way in JavaScript (micro-templating by John Resig) 

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

You can just get pure lorem ipsum template from designer 

<div>
  <div class='my-div'>
    <ul>
      <li>
        <span class='fieldFoo'>lorem ipsum</span> 
        <span class='fieldBar'>lorem ipsum</span> 
        <span class='field3'>lorem ipsum</span> 
        <span class='field4'>lorem ipsum</span> 
        <span class='long-name-field5'>lorem ipsum</span> 
      </li>
      <li>lorem ipsum 2</li>
    </ul>
  </div>
</div>

And write down all logic and data injections in reusable chain 

template()->parse('input.html')->
  find('.my-div')->
    ifVar('showMyDiv')->
    find('ul > li')->
      varsToLoopFirst('data', 'row')->
        // line below will rapidly populate template with data from $row
        varsToSelector('row', $rowFields)
;

This will create native ("compiled") language templates. Native means using only standard language base. No external library is needed to execute them. This also includes QueryTemplates.

PHP result of above chain 

<div>
  <?php  if (isset(showMyDiv) && showMyDiv) {  ?><div class="my-div">
    <ul>
<?php  if (isset($data) && (is_array($data) || is_object($data))) { foreach($data as $row):  ?><li>
        <span class="fieldFoo"><?php  if (isset($row['fieldFoo'])) print $row['fieldFoo'];
else if (isset($row->{'fieldFoo'})) print $row->{'fieldFoo'};  ?></span> 
        <span class="fieldBar"><?php  if (isset($row['fieldBar'])) print $row['fieldBar'];
else if (isset($row->{'fieldBar'})) print $row->{'fieldBar'};  ?></span> 
        <span class="field3"><?php  if (isset($row['field3'])) print $row['field3'];
else if (isset($row->{'field3'})) print $row->{'field3'};  ?></span> 
        <span class="field4"><?php  if (isset($row['field4'])) print $row['field4'];
else if (isset($row->{'field4'})) print $row->{'field4'};  ?></span> 
        <span class="long-name-field5"><?php  if (isset($row['long-name-field5'])) print $row['long-name-field5'];
else if (isset($row->{'long-name-field5'})) print $row->{'long-name-field5'};  ?></span> 
      </li>
<?php  endforeach; }  ?>
      
    </ul>
</div>
<?php  }  ?>
</div>

For better reading experience, a tree representation 

div
 - PHP
 - div.my-div
 -  - ul
 -  -  - PHP
 -  -  - li
 -  -  -  - span.fieldFoo
 -  -  -  -  - PHP
 -  -  -  - span.fieldBar
 -  -  -  -  - PHP
 -  -  -  - span.field3
 -  -  -  -  - PHP
 -  -  -  - span.field4
 -  -  -  -  - PHP
 -  -  -  - span.long-name-field5
 -  -  -  -  - PHP
 -  -  - PHP
 - PHP

From the same chain, a JavaScript template 

function templateoutput(__data) {
	if (typeof __data != 'undefined')
		for (__dataRow in __data)
			eval('var '+__dataRow+' = __data[__dataRow]');
	var __template = '';
	var print = function(value) {
		__template += value;
	}
	__template += '<div>\


  ';
 if (typeof showMyDiv != undefined && showMyDiv) { ;
	__template += '<div class="my-div">\
    <ul>\
';
 for (__key50ad3 in data) {
		var row = data[__key50ad3]; 
		if (row instanceof Function)
			continue; ;
	__template += '<li>\
        <span class="fieldFoo">';
 print(row['fieldFoo']); ;
	__template += '</span> \
        <span class="fieldBar">';
 print(row['fieldBar']); ;
	__template += '</span> \
        <span class="field3">';
 print(row['field3']); ;
	__template += '</span> \
        <span class="field4">';
 print(row['field4']); ;
	__template += '</span> \
        <span class="long-name-field5">';
 print(row['long-name-field5']); ;
	__template += '</span> \
      </li>\
';
 } 
	__template += '\
      \
    </ul>\
</div>\
';
 } 
	__template += '\
</div>';

	return __template;
}

Read more examples on Examples bundle page or directly on Syntax reference pages.

Source-oriented API diagram

API diagram

Diagram covers following classes (linked with API reference)









Hosted by Google Code