Url: http://arashkarimzadeh.com/index.php/jquery/11-jbind-jquery-bind-template.html
<style>
.block{
border-top: #bbb 1px solid;
margin-top: 1px;
}
.viewBlock, .viewBlockLeft {
border: #006699 1px solid;
background: #CCCCCC;
margin: 4px;
padding: 2px;
}
.viewBlockLeft {
float: left;
200px;
}
.role{
color: #006699;
padding: 0px 10px;
}
.age{
color: #999933;
}
.extra{
color: #3366ff;
}
.content {
background: #336699;
padding: 20px;
margin: 2px;
}
.clear{
clear: both;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jbind-1.5.7.js"></script>
<script>
$(function(){
//#
var template = $('#template3').html();
var data = [
{
id:41,
name:'Scott',
family:'Adams',
education:'Economics',
history:"Scott Adams was born",
birthdate: {month:'June',date:8,year:1957},
Publications: [{book:'The Dilbert Future',year:1997},{book:'The Dilbert Principle',year:1996}]
},
{
id:59,
name:'Jack',
family:'Welch',
education:'Chemical Engineering',
history:'Jack Welch was born in Peabody,',
birthdate: {month:'November',date:19,year:1935},
Publications: [{book:'Winning',year:2005}]
},
{
id:37,
name:'Peter',
family:'Cook',
education:'Software Engineering',
history:'Cook was himself .',
birthdate: {month:'November',date:17,year:1937},
Publications: [{book:'Shame',year:2001}]
},
{
id:12,
name:'Ian',
family:'Fleming',
education:'Software Engineering',
history:' Flemings background .',
birthdate: {month:'May',date:28,year:1908},
Publications: [{book:'Chitty Chitty Bang Bang',year:2001}]
}
];
var rowi =0;
$.fn.bindTo.colorized = function(template,data){
//if(data.id==59)
// template = template.replace('{cl}','extra');
if(rowi % 2 ==0)
template = template.replace('{cl}','extra');
else
template = template.replace('{cl}','');
rowi++;
return template;
}
$.fn.bindTo.italic = function(template,data){
return template.replace('{it}','<i><u>').replace('{/it}','</u></i>');
}
var node = $(template).bindTo(data);
$(node).appendTo('#show');
//#
});
</script>
</head>
<body>
<div id='template3' style="display:none;">
<div class="content">
<!--data-->
<!--action:colorized-->
<div class="viewBlock {cl}" id='{id}'>
#{id}<br/>
<b>{name} {family}</b>,<br/>
<i>{education}</i>,<br/>
{history}
<!--birthdate-->
<div class='age'>
{month} {date} {year}
</div>
<!--birthdate-->
<!--Publications-->
<div class='role'>
{book} {it}({year}){/it}
<!--action:italic-->
</div>
<!--Publications-->
</div>
<!--data-->
</div>
</div>
<div id='show'></div>
</body>