js模版引擎handlebars.js_handlebars-2.0.0.js-CSDN博客

本文链接：https://blog.csdn.net/u012255016/article/details/51743900

js模版引擎handlebars.js

（1）引入handlebars.js

下载：http://download.csdn.net/download/u012255016/9557107

<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../js/handlebars-v2.0.0.js"></script>

（2）html布局

<div id="container" class="bg_g">
    <!-- 数据添加位置-->
</div>

<!--js模板数据-->
<script type="text/x-handlebars-template" id="p_list">
    {{#each data}}
    <ul>
        <li>{{title}}</li>
    </ul>
    {{/each}}
</script>

（3）ajax请求数据

<script>
    $(document).ready(function () {
        $.ajax(
            {
                url:"http://localhost/wx001/html/text6api.php",
                async:true,
                dataType:"json",
                success:function (data) {
                    //console.log(data);
                    var tpl_wss = Handlebars.compile($("#p_list").html());
                    $("#container").html(tpl_wss(data));
                }
            }
        );
    });
</script>

（4）js模板添加

var tpl_wss = Handlebars.compile($("#p_list").html());
$("#container").html(tpl_wss(data));

附录：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--    <script type="text/javascript" src="../js/mobile.js"></script>-->
    <title>js模板</title>
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/handlebars-v2.0.0.js"></script>
</head>
<body>
<div id="container" class="bg_g">
    <!-- 数据添加位置-->
</div>

<!--js模板数据-->
<script type="text/x-handlebars-template" id="p_list">
    {{#each data}}
    <ul>
        <li>{{title}}</li>
    </ul>
    {{/each}}
</script>

<script>
    $(document).ready(function () {
        $.ajax(
            {
                url:"http://localhost/wx001/html/text6api.php",
                async:true,
                dataType:"json",
                success:function (data) {
                    console.log(data);
                    var tpl_wss = Handlebars.compile($("#p_list").html());
                    $("#container").html(tpl_wss(data));
                }
            }
        );
    });

//接口数据实例
//    {
//        "code": 200,
//        "message": "首页数据获取成功",
//        "data": [
//        {
//            "id": "1",
//            "title": "tilte",
//            "dates": null,
//            "contents": "content"
//        },
//        {
//            "id": "2",
//            "title": "c",
//            "dates": "2016-04-26",
//            "contents": "dfdfdfdf"
//        },
//        {
//            "id": "3",
//            "title": "czhongzhi",
//            "dates": "2016-04-26",
//            "contents": "???"
//        },
//        {
//            "id": "4",
//            "title": "czhongzhi",
//            "dates": "2016-04-26",
//            "contents": "???"
//        }
//    ]
//    }
    
</script>
</body>
</html>