|
Project Information
Members
Featured
Downloads
Wiki pages
Links
|
QueryTemplatesDOM 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. DownloadNewsGetting Started
Features
SyntaxQueryTemplates introduces following method types to jQuery syntax: Documentation
Wiki
ExampleInstead 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
Diagram covers following classes (linked with API reference) |
|
