Home > Developer > JavaScript
JQuery. tmpl () usage example, 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.
For example, with the Smarty templates used to solve the PHP Data spelling problem, JavaScript can also use the templates to solve these problems, such as jQuery-based jquery. tmpl, now accepted as the official template plug-in. The detailed API is in the Templates of jQuery. the built-in demo also demonstrates various usage.
I have used it several times, and I feel very good. I wrote the structure in HTML rather than JavaScript, and then filled the data with JSON variables, the code looks much better.
Tmpl provides several tags:
$ {}: Equivalent to {{=}}. It is an output variable encoded in html.
{Html}: output variable html, but no html encoding, suitable for output html code.
{If }{{ else }}: provides the branch logic.
{Each}: provides loop logic and $ value is used to access iteration variables.
How to Use jquery tmpl:
Template definition:
Method 1:
<script id="movieTemplate" type="text/x-jquery-tmpl"> <li> <b>${Name}</b> (${ReleaseYear}) </li> </script>
Method 2:
function makeTemplate(){ var markup='<li><b>${Name}</b> (${ReleaseYear})</li>‘; $.template(“movieTemplate”, markup); }
DATA:
var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ];
Script:
$( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" );
Instance 1:
<!DOCTYPE html>Instance 2
<ul id="movieList"></ul> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script> <script type="text/javascript"> var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; // Render the template with the movies data and insert // the rendered HTML under the "movieList" element $( "#movieTemplate" ).tmpl( movies ) .appendTo( "#movieList" ); </script>
How to Use jquerytmplminjs? What is the purpose?Blog.csdn.net/..7.aspx
The jquery-tmpl template outputs html in the templateYou have two options.
First, paste the code
Second, I will send you a demo. You can check it for yourself!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
