The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Templates
Enables you to use jQuery and HTML as a template engine.
Allows developers to replace string tokens in the DOM using jQuery selectors and replacement values.
Tokens are defined in html using the curly braces as follows:
<div id="hello_world" class="{token0}" >
It is said, every great programmer begins with:
{token1}, <span>{token2}</span>
</div>
<div class="mytemplate" >Some people say {token0}, {token1}</div>
<div class="mytemplate" >Other people say {token0}, {token1}</div>
A simple example replaces the tokens for a single id:
$('#hello_world').render( {
'token0': 'hello_world',
'token1': 'hello',
'token2': 'world'
} );A another example renders several elements on the page with the same set of values. So all elements in the document with class="mytemplate" have token0 and token1 set to hello and world.
$('.mytemplate').render( {
'token0': 'hello',
'token1': 'world',
} );A more sophisticated example renders several elements on the page with discrete values - just pass an array! So elements in the document with class="myclass" have token0/token1 set to hello/world for the first match, and foo/bar for the second match.
$('.mytemplate').render(
[
{ 'token0': 'hello', 'token1': 'world'},
{ 'token0': 'foo', 'token1': 'bar'}
]);If we want to get a little more advanced, why not try out a complex data structure?
<div id="person">
<p>{person.name}</p>
<p>Knows:</p>
<ul>
<li >{person.languages.0}</li>
<li >{person.languages.1}</li>
<li >{person.languages.2}</li>
<li >{person.languages.3}</li>
</ul>
</div>
$('#person').render({
person: {
name: 'Michael Collins',
languages: ['C++','python','php','javascript']
}
});
Believe it or not, it can do even more!!!
http://ivorycity.com/blog/jquery-template-plugin/
