Jquery. tmpl, jquery. tmpl, and jquery. tmpl

Jquery. tmpl, jquery. tmpl, and jquery. tmpl

Dynamic Request data to update pages is now a very common method, such as paging dynamic loading of blog comments, rolling loading of Weibo, and loading of scheduled requests.

In these cases, the data returned by the dynamic request is generally not formatted as JSON or XML. In short, data is spelled out on the server rather than on the browser. However, from the perspective of the transmission volume, it is not cost-effective to return HTML. In terms of web transmission, JSON rather than XML is used.

The browser generates HTML based on JSON. It is annoying that when the structure is not complex, the structure is complicated and the browser wants to die, you need to carefully write JavaScript code that is barely maintained.

Therefore, jquery. tmpl is one of the frameworks that generate HTML using templates. The following describes the usage of jquery. tmpl in detail.

The following describes how to use it.:

First, we will introduce the template and data. Needless to say, these two must be indispensable.

The template can be defined in two ways. The specific code is given below

Copy codeThe Code is as follows:
Var markup = "<li> Some content :$ {item}. <br/>"
+ "More content: $ {myValue}. </li> ";

$. Template ("movieTemplate", markup );

 
Copy codeThe Code is as follows:
<Script id = "movieTemplate" type = "text/x-jquery-tmpl">
<Li> <B >$ {Name} </B> ($ {ReleaseYear}) </li>
</Script>

In this way, two templates are defined. The former is written into the script, and the latter is written into the html.

Json

Start rendering template below

Copy codeThe Code is as follows:
$ ("# MovieTemplate"). tmpl (movies). appendTo ("# movieList ");
$. Tmpl ("movieTemplate", movies). appendTo ("# movieList ");

Note: movies is a json data array.

Copy codeThe Code is as follows:
Var movies = [
{Name: "The Red Violin", ReleaseYear: "1998 "},
{Name: "Eyes Wide Shut", ReleaseYear: "1999 "},
{Name: "The Inheritance", ReleaseYear: "1976 "}
];

Several common tags of jquery. tmpl are as follows:

$ {}, {Each }}, {if }, {else }}, {html }}

Uncommon labels

{{=}, {Tmpl }}and {wrap }}.

$ {} Is equivalent to {=}}. The output variable $ {} can also contain expressions (= and the variable must have spaces; otherwise, the expression is invalid)

Example:

Copy codeThe Code is 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: 'acount', Name: 'Mary Cheung ', Num: '2'}];
$ ("# Demo"). tmpl (users). appendTo ('# div_demo ');
</Script>

{Each} provides cyclic logic. You can use $ value to access iteration variables and customize iteration variables (I, value)

Example:

Copy codeThe Code is as follows:
<Div id = "div_each">
</Div>
<Script id = "each" type = "text/x-jquery-tmpl">
<H3> users {Each (I, user) users }}
<Div >$ {I + 1 }:{{= user. name }}</div>
{If I = 0 }}
<H4> group {Each (j, group) groups }}
<Div >$ {group. name} </div>
{{/ Each }}
{/If }}
{{/ Each }}
<H3> depart {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: 'test'}], departs: [{name: 'it'}]};
$ ("# Each"). tmpl (eachData). appendTo ('# div_each ');
</Script>

{If} {else} provides the branch logic {else} equivalent to else if

Example:

Copy codeThe Code is 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: 'acket', Name: 'Mary Cheung ', App: 1}, {ID: 'bmingda', Name: 'Jerry jin'}];
$ ("# Ifelse"). tmpl (users). appendTo ('# div_ifelse ');
</Script>

{Html} outputs the html variable, but does not have html encoding. It is suitable for outputting html code.

Instance

Copy codeThe Code is 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 }}
</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 Template

Instance

Copy codeThe Code is 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: 'actaobao', Name: ['Mary ', 'cheung ']}];
$ ("# Tmpl1"). tmpl (users). appendTo ('# tmpl ');
</Script>

{Wrap}, wrapper

Instance

Copy codeThe Code is as follows:
<Div id = "wrapDemo">
</Div>
<Script id = "myTmpl" type = "text/x-jquery-tmpl">
The following wraps and reorders some HTML content:
{Wrap "# tableWrapper "}}
<H3> One <Div>
First <B> content </B>
</Div>
<H3> Two <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 detail item.html ("h3", true )}}
<Td>
$ {$ Value}
</Td>
{{/ Each }}
</Tr>
<Tr>
{Each detail item.html ("div ")}}
<Td>
{Html $ value }}
</Td>
{{/ Each }}
</Tr>
</Tbody> </table>
</Script>
<Script type = "text/javascript">
$ (Function (){
$ ('# MyTmpl'). tmpl (). appendTo ('# wrapDemo ');
});
</Script>

$ Data $ item indicates the current template; $ data indicates the current data.

Instance:

Copy codeThe Code is 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: 'actaobao', Name: ['Mary ', 'cheung ']}];
$ ("# Item_data"). tmpl (users,
{
GetName: function (spr ){
Return this. data. Name. join (spr );
}
}). AppendTo ('# div_item_data ');
</Script>

$. TmplItem () method. You can use this method to obtain the elements from the render and re-obtain $ item.

Instance

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ ('# Demo'). delegate ('div', 'click', function (){
Var item = $. tmplItem (this );
Alert (item. data. Name );
});
</Script>