Skip to content

apodgorny/templetize

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 

Repository files navigation

#Templetize.js

###Complete javascript templating solution

  • Works equally well on server and on client side
  • No syntax limitations
  • Extensible syntax with user-defined macros
  • Running at native speeds (browser or nodejs)
  • The entire thing is ~40 lines of code! You can safely slab it onto a webpage ))

License: MIT

##Installation

npm install templetize

See usage example in JSFiddle

##Usage

  1. Create a data object:
{
	item_name  : "item",
	things     : ["shoe","another shoe","hat","pants","cup","shirt","laptop"]
}
  1. Refer to the data object as "this" within template using full javascript syntax and/or additional macro syntax:
<b>I have <?= this.things.length ?> different <?=this.item_name?>s:</b>
<ul>
	<? for (var n=0; n<this.things.length; n++) { ?>
		<li><?= n+1 ?>) <?= this.things[n]; ?></li>
	<? } ?>
</ul>

2a. Alternatively, you can use pre-defined or your own macros:

<b>I have <?= this.things.length ?> different <?=this.item_name?>s:</b>
<ul>
	<? FOR var n=0; n<this.things.length; n++ : ?>
		<li><?= n+1 ?>) <?= this.things[n]; ?></li>
	<? ENDFOR; ?>
</ul>
  1. Render template
 Templetize.render(sTemplate, oData);
  1. Display result:
<b>I have 7 different items:</b>
<ul>
	
		<li>1) shoe</li>
	
		<li>2) another shoe</li>
	
		<li>3) hat</li>
	
		<li>4) pants</li>
	
		<li>5) cup</li>
	
		<li>6) shirt</li>
	
		<li>7) laptop</li>
	
</ul>
  1. [Optional] Create your own macro
Templetize.macro(\^dostuff\, function(sExpression) {
	return dostuff(sExpression);
}); 

This will find anything looking like <?dostuff my code?> and evaluate javascript outputted by dostuff()

Enjoy! Respectfully, Lex Podgorny

About

Complete javascript templating solution

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published