DOMtempl

HTML templating that brings you peace

single var

<html>
	<p data-var="foo">Hello</p>
</html>
array (
  'foo' => 'Hello World',
)
<html>
	<p>Hello World</p>
</html>

deep var

<html>
	<a data-var="foo.bar">Hey</a>
</html>
array (
  'foo' => 
  array (
    'bar' => 'Any dogs?',
  ),
)
<html>
	<a>Any dogs?</a>
</html>

array

<html>
	<li data-each="fruits"
		data-var="fruits/"></li>
</html>
array (
  'fruits' => 
  array (
    0 => 'apple',
    1 => 'orange',
    2 => 'banana',
  ),
)
<html>
	<li>apple</li>
	<li>orange</li>
	<li>banana</li>
</html>

deep array

<html>
	<li data-each="person">
		<a data-var="name"></a>
	</li>
</html>
array (
  'person' => 
  array (
    0 => 
    array (
      'name' => 'John',
      'age' => 25,
    ),
    1 => 
    array (
      'name' => 'Bill',
      'age' => 33,
    ),
  ),
)
<html>
	<li>
		<a>John</a>
	</li>
	<li>
		<a>Bill</a>
	</li>
</html>

toggle

<html>
	<div data-when="cats">Cats are OK</div>
	<div data-when="dogs">Dogs are OK</div>
</html>
array (
  'cats' => true,
  'dogs' => false,
)
<html>
	<div>Cats are OK</div>
</html>

attribute

<html>
	<a data-attr-href="foo">Some link</a>
</html>
array (
  'foo' => 'http://example.org',
)
<html>
	<a href="http://example.org">Some link</a>
</html>

full

<html>
<ul data-when="menu">
	<li data-each="/menu">
		<a
		data-attr-href="href"
		data-attr-class="class"
		data-var="name"></a>
	</li>
</ul>
</html>
array (
  'menu' => 
  array (
    0 => 
    array (
      'href' => 'index',
      'name' => 'Main',
      'class' => '',
    ),
    1 => 
    array (
      'href' => 'contact',
      'name' => 'Contact',
      'class' => '',
    ),
    2 => 
    array (
      'href' => 'about',
      'name' => 'About',
      'class' => 'active',
    ),
  ),
)
<html>
<ul>
	<li>
		<a href="index" class="">Main</a>
	</li>
	<li>
		<a href="contact" class="">Contact</a>
	</li>
	<li>
		<a href="about" class="active">About</a>
	</li>
</ul>
</html>