模版化列表

    干了一段时间，是时候总结一下了，主要总结下前台用到的技术。areaInfo.js数据定义如下：
{
 "AreaList": [
        {
            "Name": "北京",
            "Num": 123
        },
        {
            "Name": "Nework",
            "Num": 124
        }
    ]
}
---------------------
     前台简单的代码如下，主要用到template.js 和jquery.js, test1.js：

<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/template.js"></script>
    <script type="text/javascript" src="js/view/test1.js"></script>
</head>
    <body>
        <table>
            <thead><tr><th>Name</th><th>Num</th></tr></thead>
            <tbody id="tb-List"></tbody>
        </table>
        <hr/>
        <br/>
        <script id="areaLst-tpl" type="text/html">
            <%for(i = 0; i<AreaList.length; i++){ %>
            <tr>
                <td><%==AreaList[i].Name %></td>
                <td><%==AreaList[i].Num %></td>
            </tr>
            <%} %>
        </script>
    </body>

------test1.js -----

$(document).ready(function() {
    $.ajax({
        url: "js/data/areaInfo.js",
        //data: { 'Inputs': data },
        dataType: "json",
        type: "GET",
        async: false,
        success: function (json) {
            if (json.AreaList != null && json.AreaList.length > 0) {
                var items = template('areaLst-tpl', json);
                $('#tb-List').empty();
                $('#tb-List').html(items);
            }
            else {
                alert("no data");
            }
        },
        error: function (error) {
            console.log(error);
        }
    });
});

逻辑很简单，Ajax请求定义的json数据，然后调用template代码，格式化数据显示形成数据列表，类似 jsp用起来很方便。