Posted By

wildpeaks on 10/06/10

Tagged

Versions (?)

Last Edited at 10/06/10 03:11am

Statistics

Viewed 842 times

Favorited by 1 user(s)

Related snippets

jQuery Templates: Two ways to define a template

/ Published in: jQuery

**Important: this snipplet has moved to Github.**

- [Method 1: Static template via a SCRIPT tag, using Jquery Templates](https://gist.github.com/1972787)

- [Method 2: Dynamic template from an arbitrary string, using Jquery Templates](https://gist.github.com/1972811)

----

Both methods work even without the *plus* extension of the [Templates plugin](http://github.com/nje/jquery-tmpl)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/**
 * Method 1: Static template, using a SCRIPT tag.
 */
 
//HTML:
<script id="MyStaticTemplate" type="text/x-jquery-tmpl"> 
 <div>Hello ${hello}</div>
</script>
 
//Javascript:
var MyData = {hello: "world"};
$("#MyStaticTemplate").tmpl(MyData).appendTo("#contents");
 
 
 
/**
 * Method 2: Dynamic, from a string (which could be stored in an external
 * file or even in a database]
 */
var MyData = {hello: "world"};
$.template("MyInlineTemplate", "<div>Hello ${hello}</div>");
$.tmpl("MyInlineTemplate", MyData).appendTo("#contents");
 
 
 
/**
 * Note that static templates cannot be called using the dynamic method,
 * therefore this would not work:
 */
$.tmpl("MyStaticTemplate", MyData).appendTo("#contents");