template
Cliche
December 27, 2009 - 6:46pm — bjscottCliche takes a model (any basic Javascript object) and a template view (a block of HTML/XML/other text with embedded field names) and produces a view of the model. This lets you use MVC techniques on the client-side to simplify the creation of dynamic web applications.
Resiglet
December 3, 2009 - 12:02am — deadlyiconA feature rich template DSL much like ERB
see John Resig's post http://ejohn.org/blog/javascript-micro-templating for more info
Why another templating plugin for jQuery?
I needed a lightweight jQuery template plugin that supported more then just replacing tokens.
jQBinder
October 14, 2009 - 7:35pm — Satoshi NakajimaJQBinder is a light-weight template engine that allows client-side data binding between an HTML template (embedded in HTML file itself) and JSON data (which is typically asynchronously fetched from the server).
The syntax is very simple. You just need to put something like this in HTML (HTML snippet between outer is the template):
<div id="#target">
<img src='$(.user.profile_image_url)' />
<div>$(.text)</div>
</div>
Then, simply call
$("#stage").dataBindTo( { url: urlToJSONP } );
It will load a json data from the specified URL (which must be an array), then generate HTML snippet for each row of data using the template above - replacing all $(.propertyName) with the specified property of each row data.
I have tested it on Safari 4.0, Chrome 4.0, Firefox 3.5, Opera 9.0 and IE 8.0 so far.
Block Manager
August 30, 2009 - 1:32am — wdsnAdd and delete form fields with buttons add and delete
usage:
<script src="./js/jquery-1.3.2.min.js"></script>
<script src="./js/jquery.tmpl.js"></script>
<script src="./js/jquery.blockmanager.js"></script><script language="JavaScript">
$(document).ready(function() {
$blockEdu = $('#tableBottomRowEdu').blockmanager({
names: {
name: "text",
specialnost: "select"
},
fieldsName: "user[edu]",
templateItem: "#templateItemEdu",
templatePrefix: "eduTr",
itemId: "user_id",
buttonAddId: "eduAdd"
});
// add empty fields
$blockEdu.addItem("", {});
// add block with values
$blockEdu.addItem('2', {
name: "Jhon Connor",
specialnost: "2"
});
});
</script>jsont
August 26, 2009 - 4:45am — KevBurnsJrAn adaptation of Andy Chu's json-template made to play nice with jQuery.
jQuery HTML Templates
August 23, 2009 - 12:23am — DanielSchafferDynamically add HTML into your page's DOM without generating HTML in your JavaScript code.
Templates
August 19, 2009 - 4:19pm — mcollinsEnables 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',
Tempest jQuery Templating Plugin
August 7, 2009 - 3:39pm — fitzgenTempest jQuery Templating Plugin
Copyright (c) 2009 Nick Fitzgerald - http://fitzgeraldnick.com/ - MIT licensed
Note: All releases are minified, to get the latest development version grab a
clone from http://github.com/fitzgen/tempest/tree/master
HELLO WORLD
$(document).append(
$.tempest("<p>Hello, {{ name }}!</p>", {
name: "World"
})
);PHILOSOPHY
I was not satisfied with the other templating plugins available, so I wrote my
own. This templating system is very simple and enforces the separation of form
and function, or HTML and JS. This provides a great abstraction layer so that
you can write a template and then promptly remove the mental overhead of
rendering js objects to HTML.
Other templating languages just build and execute function blocks with
strings. Any type of js logic you could want is included and evaluated. For some
people, this may be the freedom that they want.
On the other hand, Tempest will only fill in values and iterate over arrays for
you. This forces you to remove any programming logic from the templates and
separate form from function. This type of templating philosophy can also be seen
in the Django templating language.
The other big thing, for me, is that iteration is handled seamlessly. Just pass
an array of objects to tempest instead of a single object and it will return a
jquery element array.
Templater Easy Templating System
August 4, 2009 - 12:00pm — PoweredByJAMThis is a very simple plugin to assist with handling repeating blocks of html in a somewhat more sane matter.
All you do is the following:
HTML:
<div id="template_container">
<a href="__LINK__" title="__TITLE__">__TITLE__</a>
</div>Script:
var params = {link:'http://www.example.com',title:'some title'};
var link_html = $('#template_container').templater(params);And you're good to go!
$("#template").feed() - AJAXified Templatized RSS Feeder
June 30, 2009 - 6:29pm — iwhitcombThis jQuery class will read RSS feeds on a website through the use of AJAX and feed the data into a template as defined by the developer. Simple create a template object and define the "item" level of the RSS feed once within the object using variables for the different feed items. This plugin will then read the feed and duplicate the template object however many times specified- creating a simple feed reader. VERY easy to implement. http://www.ooeygui.net