javascript模板技术界面显示可以用另外的方法来写了

最新推荐文章于 2024-09-18 15:54:57 发布

走错路的程序员

最新推荐文章于 2024-09-18 15:54:57 发布

阅读量1.2k

点赞数

文章标签： javascript user function list generator button

<html>
<head>
<style type="text/css">
    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; }
</style>
<script type="text/javascript">
// Simple JavaScript Templating
// Originally from John Resig - http://ejohn.org/ - MIT Licensed
// Fixed by Neil (in Rick Strahl's blog: http://www.west-wind.com/Weblog/posts/509108.aspx)
(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);
}
</script>
</head>
<body>
<script type="text/html" id="template_user_list">
<# 
    for ( var i = 0; i < data.length; i++ ) { 
    var testStr1 = 'test single quote char in javascript code';
#>
<li>
    <a href="<#=data[i].url#>#test"><#=data[i].name#></a>, 
    <input type="button" value="user detail" οnclick="show_user_form(<#= data[i].id #>);" />
</li>
<# 
    } 
#>
</script>
56484577
<script type="text/html" id="template_user_form">
<table id="u<#=id#>" class="user_form">
    <tr>
        <td align="right">ID:</td>
        <td><#=id#></td>
    </tr>
    <tr>
        <td align="right">Name:</td>
        <td style='color:red;font-weight:600;'><#=name#></td>
    </tr>
    <tr>
        <td align="right">Web Page:</td>
        <td><#=url#></td>
    </tr>
    <tr>
        <td align="right">Birthday</td>
        <td><#=birthday#></td>
    </tr>
</table>
</script>

<input type="button" value="show users" οnclick="show_user_list();" /><br />
<div class="container">
    <p>User Lists:</p>
    <ul id="user_list"></ul>
</div>
<div id="user_form" class="container"></div>
</body>
</html>

界面内容是模板写出来的,而不是用字符串连接的方式写出来的