jQuery模板：定义模板的两种方法

Posted 2021-02-25

**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)

/**
 * 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");