<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hogan.js example</title>
</head>
<body>
<div id="employeeInfo"></div>
<div id="employeeInfodetails"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var data=[];
$(document).ready(function() {
var templateemployeeInfo = Hogan.compile(
'Name - <input type="text" id="txtname" />' +
'<br/><br/>' +
'Mobile - <input type="text" id="txtmobile" />' +
'<br/><br/>' +
'Email - <input type="text" id="txtemail" />' +
'<br/><br/>' +
'<input type="button" id="btnsubmit" value="Submit"/>'+
'<input type="button" id="btnedit" value="Edit"/>'
);
var employeeInfo = templateemployeeInfo.render(data);
document.getElementById('employeeInfo').innerHTML = employeeInfo;
$('#btnsubmit').click(function(){
var txtname = $('#txtname').val();
var txtmobile = $('#txtmobile').val();
var txtemail = $('#txtemail').val();
data.push({
name : txtname,
mobile : txtmobile,
email : txtemail
});
});
$('#btnedit').click(function(){
var templateemployeeInfodetails = Hogan.compile(
'Name - <input type="text" id="txtname" value={{name}}></input>' +
'<br/><br/>' +
'Mobile - <input type="text" id="txtmobile" />' +
'<br/><br/>' +
'Email - <input type="text" id="txtemail" />' +
'<br/><br/>' +
'<input type="button" id="btnsubmit" value="Submit"/>'+
'<input type="button" id="btnedit" value="Edit"/>'
);
var employeeInfodetails = templateemployeeInfodetails.render(data[0]);
document.getElementById('employeeInfodetails').innerHTML = employeeInfodetails;
});
});
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hogan.js example</title>
</head>
<body>
<div id="employeeInfo"></div>
<div id="employeeInfodetails"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var data=[];
$(document).ready(function() {
var templateemployeeInfo = Hogan.compile(
'Name - <input type="text" id="txtname" />' +
'<br/><br/>' +
'Mobile - <input type="text" id="txtmobile" />' +
'<br/><br/>' +
'Email - <input type="text" id="txtemail" />' +
'<br/><br/>' +
'<input type="button" id="btnsubmit" value="Submit"/>'+
'<input type="button" id="btnedit" value="Edit"/>'
);
var employeeInfo = templateemployeeInfo.render(data);
document.getElementById('employeeInfo').innerHTML = employeeInfo;
$('#btnsubmit').click(function(){
var txtname = $('#txtname').val();
var txtmobile = $('#txtmobile').val();
var txtemail = $('#txtemail').val();
data.push({
name : txtname,
mobile : txtmobile,
email : txtemail
});
});
$('#btnedit').click(function(){
var templateemployeeInfodetails = Hogan.compile(
'Name - <input type="text" id="txtname" value={{name}}></input>' +
'<br/><br/>' +
'Mobile - <input type="text" id="txtmobile" />' +
'<br/><br/>' +
'Email - <input type="text" id="txtemail" />' +
'<br/><br/>' +
'<input type="button" id="btnsubmit" value="Submit"/>'+
'<input type="button" id="btnedit" value="Edit"/>'
);
var employeeInfodetails = templateemployeeInfodetails.render(data[0]);
document.getElementById('employeeInfodetails').innerHTML = employeeInfodetails;
});
});
</script>
</body>
</html>
