Dynamic request data to update the page is now a very common method, such as blog comments page dynamic loading, micro-blog scrolling load and timed request loading.
In these cases, the data returned by the dynamic request is generally not a spelled HTML or JSON or XML, and the data is spelled on the server without the data being spelled in the browser. However, in terms of transport, it is not cost-effective to return HTML, and in terms of web transport, it is now more about using JSON than XML.
Browser-side generation of HTML based on JSON there is a very distressed place is that the structure is not complex when the good, the structure of a complex, want to die, need to be very careful to write almost impossible to maintain the JavaScript code.
So some of the frames that generate HTML with the template appear Jquery.tmpl is one of them, let's introduce the use of Jquery.tmpl in detail below
here's how to use this :
First, introduce the template and data, needless to say these two must be indispensable
There are two ways to define a template, the following is a specific code
Copy Code code as follows:
var markup = "<li>some content: ${item}.<br/>"
+ "More content: ${myvalue}.</li>";
$.template ("Movietemplate", markup);
Copy Code code as follows:
<script id= "Movietemplate" type= "Text/x-jquery-tmpl" >
<li><b>${Name}</b> (${releaseyear}) </li>
</script>
This defines two types of templates, the first of which is written inside the script, and the other one is written into the HTML inside
Data with JSON
Start rendering templates below
Copy Code code as follows:
$ ("#movieTemplate"). Tmpl (Movies). Appendto ("#movieList");
$.tmpl ("Movietemplate", Movies). Appendto ("#movieList");
Note: Movies is an array of JSON data
Copy Code code as follows:
var movies = [
{Name: "The Red Violin", Releaseyear: "1998"},
{Name: "Eyes Wide Shut", Releaseyear: "1999"},
{Name: "The Inheritance", Releaseyear: "1976"}
];
Several commonly used labels for Jquery.tmpl are:
${}, {{each}}, {{if}}, {{else}}, {{html}}
Not used tags
{{=}},{{tmpl}} and {{wrap}}.
${} equals to {{=}} is an output variable ${} Inside also can put expression (= and variable must have space, otherwise invalid)
Example:
Copy Code code as follows:
<div id= "Div_demo" >
</div>
<script id= "Demo" type= "Text/x-jquery-tmpl" >
<div style= "margin-bottom:10px;" >
<span>${ID}</span>
<span style= "margin-left:10px;" >{{= name}}</span>
<span style= "margin-left:10px;" >${number (Num) +1}</span>
<span style= "margin-left:10px;" >${Status}</span>
</div>
</script>
<script type= "Text/javascript" >
var users = [{id: ' think8848 ', Name: ' Joseph Chan ', num: ' 1 ', status:1}, {id: ' Acloud ', Name: ' Mary Cheung ', num: ' 2 '} ];
$ ("#demo"). Tmpl (Users). Appendto (' #div_demo ');
</script>
{{Each}} provides loop logic, $value access iteration variable can also customize iteration variable (i,value)
Example:
Copy Code code as follows:
<div id= "Div_each" >
</div>
<script id= "Each" type= "Text/x-jquery-tmpl" >
{{each (I,user) users}}
<div>${i+1}:{{= user.name}}</div>
{{if i==0}}}
{{each (J,group) groups}}
<div>${group.name}</div>
{{/each}}
{{/if}}
{{/each}}
{{Each departs}}}
<div>{{= $value .name}}</div>
{{/each}}
</script>
<script type= "Text/javascript" >
var eachdata = {users: [{name: ' Jerry '}, {name: ' John '}], groups: [{name: ' Mingdao '}, {name: ' Meihua '}, {name: ' t EST '}], departs: [{name: ' IT '}]};
$ ("#each"). Tmpl (Eachdata). Appendto (' #div_each ');
</script>
{{if}}} {{Else}}} provides branching logic {{else}}} equivalent to else if
Example:
Copy Code code as follows:
<div id= "Div_ifelse" ></div>
<script id= "IfElse" type= "Text/x-jquery-tmpl" >
<div style= "margin-bottom:10px;" ><span>${id}</span><span style= "margin-left:10px;" >{{= name}}</span>
{{if Status}}
<span>Status${Status}</span>
{Else APP}}
<span>App${App}</span>
{{Else}}}
<span>None</span>
{{/if}}}
</div>
</script>
<script type= "Text/javascript" >
var users = [{id: ' think8848 ', Name: ' Joseph Chan ', Status:1, app:0}, {ID: ' Acloud ', Name: ' Mary Cheung ', app:1}, { ID: ' Bmingdao ', Name: ' Jerry Jin '}];
$ ("#ifelse"). Tmpl (Users). Appendto (' #div_ifelse ');
</script>
{{html}} output variable HTML, but no HTML encoding, suitable for output HTML code
Instance
Copy Code code as follows:
<div id= "div_html" ></div>
<script id= "html" type= "Text/x-jquery-tmpl" >
<div style= "margin-bottom:10px;" >
<span>${ID}</span>
<span style= "margin-left:10px;" >{{= name}}</span>
${html}
{{HTML html}}
</div>
</script>
<script type= "Text/javascript" >
var user = {ID: ' think8848 ', Name: ' Joseph Chan ', HTML: ' <button>html</button> '};
$ ("#html"). Tmpl (user). Appendto (' #div_html ');
</script>
{{Tmpl}} nested templates
Instance
Copy Code code as follows:
<div id= "Tmpl" ></div>
<script id= "Tmpl1" type= "Text/x-jquery-tmpl" >
<div style= "margin-bottom:10px;" >
<span>${ID}</span>
<span style= "margin-left:10px;" >{{tmpl ($data) ' #tmpl2 '}}</span>
</div>
</script>
<script id= "tmpl2" type= "Type/x-jquery-tmpl" >
{{Each name}}${$value} {{/each}}}
</script>
<script type= "Text/javascript" >
var users = [{id: ' think8848 ', Name: [' Joseph ', ' Chan ']}, {ID: ' Acloud ', Name: [' Mary ', ' Cheung ']}];
$ ("#tmpl1"). Tmpl (Users). Appendto (' #tmpl ');
</script>
{{Wrap}}, Wrapper
Instance
Copy Code code as follows:
<div id= "Wrapdemo" >
</div>
<script id= "Mytmpl" type= "Text/x-jquery-tmpl" >
The following wraps and reorders some HTML content:
{{wrap ' #tableWrapper}}}
<div>
<b>content</b>
</div>
<div>
and <em>more</em> <b>content</b>
</div>
{{/wrap}}}
</script>
<script id= "Tablewrapper" type= "Text/x-jquery-tmpl" >
<table cellspacing= "0" cellpadding= "3" border= "1" ><tbody>
<tr>
{{each $item. html ("H3", True)}}
<td>
${$value}
</td>
{{/each}}
</tr>
<tr>
{{each $item. html ("div")}}
<td>
{{html $value}}
</td>
{{/each}}
</tr>
</tbody></table>
</script>
<script type= "Text/javascript" >
$ (function () {
$ (' #myTmpl '). Tmpl (). Appendto (' #wrapDemo ');
});
</script>
$data $item $item represents the current template; $data represents the current data.
Instance:
Copy Code code as follows:
<div id= "Div_item_data" ></div>
<script id= "Item_data" type= "Text/x-jquery-tmpl" >
<div style= "margin-bottom:10px;" >
<span>${$data .id}</span>
<span style= "margin-left:10px;" >${$item. GetName ("")}</span>
</div>
</script>
<script type= "Text/javascript" >
var users = [{id: ' think8848 ', Name: [' Joseph ', ' Chan ']}, {ID: ' Acloud ', Name: [' Mary ', ' Cheung ']}];
$ ("#item_data"). Tmpl (Users,
{
Getname:function (SPR) {
Return This.data.Name.join (SPR);
}
}). Appendto (' #div_item_data ');
</script>
$.tmplitem () method, which can be used to retrieve the render from the elements that come out of the $item
Instance
Copy Code code as follows:
<script type= "Text/javascript" >
$ (' #demo '). Delegate (' Div ', ' click ', function () {
var item = $.tmplitem (this);
alert (item.data.Name);
});
</script>
