TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
jQuery Template
Kamal Rawat
Jun 18
2014
Code
4
k
0
3
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
expand
While writing applications whenever data is fetched with post request from the server/database, in return we create DOM elements to represent that data. Now here we do all the messy code to put the string together in the javascript code and iterate the result set to display the data.
At that time it would be great indeed help if we have some kind of template engine, which could display/render data without parsing and doing lot of messy code.
Lets c in action and answer our HOW can we implement jQuery-template.
<html>
<head>
<script type=
"text/javascript"
src=
"http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.js"
></script>
<script type=
"text/javascript"
src=
"http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"
></script>
</head>
<body>
<div id=
"pageContent"
>
<h1><center>Indian Players</center></h1>
<div id=
"container"
></div>
</div>
<script id=
"players"
type=
"text/x-jQuery-tmpl"
>
<div>
<h2>${name}</h2>
<img src=
"${picture}"
alt=
""
style=
"border:2px solid blue"
/>
Matches: ${matches}
</div>
</script>
<script>
var
cricketers = [
{ name:
"Sachin Tendulkar"
, matches: 434, picture:
"sachin.jpg"
},
{ name:
"Virendra Sehwag"
, matches: 334, picture:
"sehwag.jpg"
},
{ name:
"Rahul Dravid"
, matches: 384, picture:
"dravid.jpg"
},
{ name:
"Dhoni"
, matches: 280, picture:
"dhoni.jpg"
},
];
$(
"#players"
).tmpl(cricketers).appendTo(
"#container"
);
</script>
</body>
</html>
jQuery Template
Template in jQuery
Template Engine