partial.js logo
Latest version
v1.3.1 (RC2)

How do "templates" work?


Templates are rendering data from database or from Array collection. It's safe, simple and comfortable for rendering data from database. Templates are rendered in views or into a string.




Views

Define template

You can define a lot of template files.
Example

Mode: repeat all

Mode: "repeat all" is repeating of all HTML code by the array collections.

	<div>{name}</div>
	<div>{registered | yyyy-MM-dd}</div>

EXAMPLE OF OUTPUT:
	<div>Peter</div>
	<div>2013-10-15</div>
	<div>John</div>
	<div>2013-10-12</div>
	<div>Lucia</div>
	<div>2013-10-05</div>


Mode: repeat comment

Mode: "repeat comment" is repeating of all HTML code in the commented code.

	<ul>
		<!--
		<li>
			<div>{name}</div>
			<div>{registered | yyyy-MM-dd}</div>
		</li>
		-->
	</ul>

EXAMPLE OF OUTPUT:
	<ul>
		<li>
			<div>Peter</div>
			<div>2013-10-15</div>
		</li>
		<li>
			<div>John</div>
			<div>2013-10-12</div>
		</li>
		<li>
			<div>Lucia</div>
			<div>2013-10-05</div>
		</li>
	</ul>


Mode: repeat comment with repository object

	<ul>
		<!--
		<li>
			<div>{name}</div>
			<div>{registered | yyyy-MM-dd}</div>
		</li>
		-->
	</ul>
	<div>{items | ### ###} {items | 'items', 'item', 'items', 'items'}</div>

EXAMPLE OF OUTPUT:
	<ul>
		<li>
			<div>Peter</div>
			<div>2013-10-15</div>
		</li>
		<li>
			<div>John</div>
			<div>2013-10-12</div>
		</li>
		<li>
			<div>Lucia</div>
			<div>2013-10-05</div>
		</li>
	</ul>
	<div>3 items</div>


Templates

IMPORTANT

A number formatting

This mark is using: Number.prototype.format().
		<ul>
		<!--
			<li>
				<div>{name}</div>
				<div>{price | ### ###.##}</div>
			</li>
		-->
		</ul>
	

A date & time formatting

This mark is using: Date.prototype.format().
		<ul>
		<!--
			<li>
				<div>{name}</div>
				<div>{date | dd.MM.yyyy} at {date | HH:mm:ss}</div>
			</li>
		-->
		</ul>
	

Pluralize number

This mark is using: Number.prototype.pluralize().
		<ul>
		<!--
			<li>
				<div>{count | 'zero', 'one', 'few', 'other'}</div>
			</li>
		-->
		</ul>
	

A string formatting (maximum characters)

This mark is using: String.prototype.max().
		<ul>
		<!--
			<li>
				<div>{name | 20}</div>
			</li>
		-->
		</ul>
	

Template condition

Templates support very simple conditions. You can use EVEN/ODD or BOOLEAN condition. Template knows 3 types of conditions:
		<ul>
		<!--
			<li>
				<div>{boolean | 'if true (encoded)' : 'if false (encoded) - optional'}</div>
				<div>{!boolean | 'if true (raw)' : 'if false (raw) - optional'}</div>
				<br />
				<div>{number | 'if even (encoded)' : 'if odd (encoded) - optional'}</div>
				<div>{!number | 'if even (raw)' : 'if odd (raw) - optional'}</div>
				<br />
				<div>{# | 'if even (encoded)' : 'if odd (encoded) - optional'}</div>
				<div>{!# | 'if even (raw)' : 'if odd (raw) - optional'}</div>
			</li>
		-->
		</ul>
	
Complete example

Render Template or View in Template

Templates support rendering of templates or views in templates.
		var model = [
			{ alias: 'Peter', information: { age: 29, sex: 'male' }, tags: ['JavaScript', 'CSS', 'HTML', 'node.js'] },
			{ alias: 'Jozef', information: { age: 26, sex: 'male' }, tags: ['Java', 'Objective-C', 'C#'] },
			{ alias: 'Lucia', information: { age: 32, sex: 'female' }, tags: ['copywriting'] }
		];

		<ul>
		<!--
			<li>
				<div>{alias}</div>
				<div>@{view('user', information)}</div>
				<div>@{template('tags', tags)}</div>
			</li>
		-->
		</ul>