table.user_form {
border-collapse:collapse;
border-top:solid 1px blue; border-left:solid 1px blue;
margin:0; padding:0;
}
table.user_form td {
border-collapse:collapse;
border-bottom:solid 1px blue; border-right:solid 1px blue;
padding:3px;
}
.container { margin:10px; }
ul.#user_list { margin:0; padding:0; }
#user_list li { margin:0; padding:0; }
// Simple JavaScript Templating
// Originally from John Resig - - MIT Licensed
(function() {
var cache = {};
this.apply_template = function(template_id, data) {
var fn = cache[template_id];
if (!fn) {
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
var template = document.getElementById(template_id).innerHTML;
fn = new Function("data", "var p=[]; with(data){p.push('" +
// Convert the template into pure JavaScript
template
//remove chars \r, \t and \n from template
.replace(/[\r\t\n]/g, " ")
//replace ' in javascript code (those between <# and #>) with \t
.replace(/'(?=[^#]*#>)/g, "\t")
//replace ' in html code (those outside <# and #>) with \'
//' in javascript code was replaced in previous step
.split("'").join("\\'")
//recovery ' in javascript code
.split("\t").join("'")
//...<#= data[i].name #>... => p.push('...',data[i].name,'...');
.replace(/<#=(.+?)#>/g, "',$1,'")
.split("<#").join("');")
.split("#>").join("p.push('")
+ "');}return p.join('');");
alert(fn);
cache[template_id] = fn;
}
return fn(data);
};
})();
//examples
var users = [
{ id: 8901, url: "google.com", name: "Chris", birthday: new Date(1986, 3, 20) },
{ id: 1402, url: "sina.com", name: "Kevin", birthday: new Date(1960, 3, 20) },
{ id: 2129, url: "riccc.cnblogs.com", name: "Richie", birthday: new Date(1979, 9, 10)}];
function show_user_list() {
var container = document.getElementById("user_list");
if (container.innerHTML != "") return;
container.innerHTML = apply_template("template_user_list", users);
}
function show_user_form(id) {
var u;
for (var i = 0; i < users.length; i++)
if (users[i].id == id) {
u = users[i];
break;
}
var container = document.getElementById("user_form");
if (container.id == u.id) return;
container.innerHTML = apply_template("template_user_form", u);
}
<#
for ( var i = 0; i < data.length; i++ ) {
var testStr1 = 'test single quote char in javascript code';
#>
<#
}
#>
56484577