jquery Tmpl Detailed

dynamic request data to update the page is now a very common method, such as blog comments on the page dynamic loading, micro-blog scrolling loading and timed request loading.

In these cases, the data returned by the dynamic request is generally not a well-spelled HTML or JSON or XML, in short, the browser-side to spell data on the server side of the data. However, in terms of throughput, the return HTML is not cost-effective, and in terms of web transport, it is now more about using JSON than XML.

Browser-side generated HTML based on JSON there is a very difficult point is that the structure is not complex when it is OK, the structure of a complex, you want to die, you need to be very careful to write almost impossible to maintain the JavaScript code.

So some of the template generated by the HTML framework appears Jquery.tmpl is one of them, let us introduce the use of the next Jquery.tmpl in detail

Several common tags of jquery.tmpl are:

${}, {{each}}, {{ if}}, {{ else}}, {{ html} }

Infrequently used labels

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

${} equals with {{=}} is an output variable ${} You can also put an expression (= and variable must have a space, otherwise invalid)

Example:

<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 variables can also customize iteration variables (i,value)

Example:

<div id= "Div_each" ></div><script id= "Each" type= "Text/x-jquery-tmpl" >     

{{ if}} {{else} } provided branching logic {{else}} equivalent to else if

Example:

<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 outputting HTML code

Instance

<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

<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

<div id= "Wrapdemo" > </div><script id= "Mytmpl" type= "Text/x-jquery-tmpl" > The following wraps and R  Eorders some HTML content: {{wrap ' #tableWrapper '}} 

$data $item $item represents the current template; $data represents the current data.

Instance:

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

The $.tmplitem () method, using this method, can fetch the $item from the render element.

Instance

<script type= "Text/javascript" > $ (' #demo '). Delegate (' Div ', ' click ', Function () {                var item = $.tmplitem (this) ;                alert (item.data.Name);            }); </script>

jquery Tmpl Detailed