The jQuery tmplItem() is a method which makes the
use of templates easy in terms of simple string concatenation and read-only
rendering. They can allow user to create fully-fledged interactive client-side
Ajax applications where actions are performed through coding.
Syntax
$.tmplItem(element).data[element.
name]
Lets quickly jump to the solution where will we
try to design a editable master detail view through the method tmplItem using
ASP.NET.
Code Snippets
<html>
<head><title>jQuery
tmplItem method</title>
<style>
table {cursor:pointer;border-collapse:collapse;float:left;clear:both;}
table tr {border:1px solid black;color:red;height:25px;}
table tr:hover {color:blue;}
table, #personDetail > div {border:2px solid;color:#820000
;width:230px;
margin:4px 0 4px 4px;
background-color:#f8f8f8;}
table td, #personDetail div div {padding:3px;margin:3px;}
.selected {background-color:yellow;}
#personDetail input {float:right;width:125px;}
#personDetail
{float:left;margin-left:10px;}
button {float:left;margin:4px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body bgcolor="#fff4ff">
<tr><td>
${firstName} ${lastName}
</td></tr>
</script>
<div>
<div>First Name: <input
name="firstName" value="${firstName}"/></div>
<div>Last Name: <input
name="lastName" value="${lastName}"/></div>
</div>
</script>
<button id="addBtn"
style="font-family:
Verdana; font-size:
medium; font-weight:
bold">Click to
add a new customer in list</button>
<table style="border-color:
#820000; font-family:
Verdana; font-size:
small; color:
red; font-weight:
bold;"
<div id="personDetail" style="border-color:
#820000"></div>
<script>
var people = [
{ firstName:
"Sanjay", lastName:
"Verma" },
{ firstName:
"Deepti", lastName:
"Khanna" }
];
var selectedItem = null;
function renderTemplate(container, template, data) {
$(container).empty();
$(template).tmpl(data).appendTo(container);
}
renderTemplate("#peopleList",
"#listItemTemplate", people);
function select(tmplItem) {
if (selectedItem) {
$(selectedItem.nodes).removeClass("selected");
}
$(tmplItem.nodes).addClass("selected");
selectedItem =
tmplItem;
renderTemplate("#personDetail",
"#detailTemplate", tmplItem.data);
}
$("#addBtn").click(function
() {
people.push({
firstName: "firstname", lastName:
"lastname" });
renderTemplate("#peopleList",
"#listItemTemplate", people);
var addedTmplItem = $("#peopleList
tr:last").tmplItem();
select(addedTmplItem);
});
$("#peopleList")
select($.tmplItem(this));
});
.delegate("input",
"change", function
() {
$.tmplItem(this).data[this.name]
= this.value;
renderTemplate("#peopleList",
"#listItemTemplate", people);
});
</script>
</body>
</html> Output
Now click on the button to add a new customer in
the given list. A window will appear as below for the personal details of customer as
first and last name of customer, insert the data and click again to add a
customer.
