1.handlebars(基础一)

一个使用了就会爱上的模板,真的很方便,强烈推荐。静态页面是房子的一个骨架,动态数据就是家里的门,家里的窗,家里的沙发...这些可以随之而动的东西,想让其怎么动,它就能怎么动。

从后台请求回来数据,(1.使用字符串拼接的方式2.es6模板字符串),渲染到页面。我只使用过这两种方法,第一种方法个人觉得操作繁琐,页面中大量的str+=“”页面很乱,写错一个符号,整个都渲染不出来。第二种方法很方便可以让页面html保持原有格式,直接反引号进行操作(str+=${obj1[i].h_year})不足的是目前浏览器对于es6的支持不足,需要用编译工具(babel)编译成es5浏览器才能认识它。handlebars模板可以让html保持原有格式,且不需要经过编译,体积小。

注意:handlebars是一款jquery插件

一:引入1.引入jquery 2.引入handlebars

<!--引入jquery/handlebars-->
<script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="./js/handlebars-v4.0.10.js"></script>

二:写handlebars模板

注意:在需要渲染的html外层包上script标签,1.type要写,且要写对。2.给这个模板添加一个唯一的id值,不添加会找不到

 <tbody class="student-temp">
    <script type="text/x-handlebars-template" id="student-temp">
        <tr>
            <td>aa</td>
            <td>bb</td>
            <td>cc</td>
            <td>dd</td>
        </tr>
    </script>
    </tbody>

三:handlebars的取值 {{变量名}}

 <tbody class="student-temp">
    <script type="text/x-handlebars-template" id="student-temp">
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
            <td>{{gender}}</td>
            <td>{{fraction}}</td>
        </tr>
    </script>
    </tbody>

四:渲染数据

 <script>
    //    模拟数据
    var data = {
            "name": "柳2",
            "age": '8',
            "gender": '女',
            "fraction": '89'
    };
    console.log(data);

    //    获取到handlebars这个模板中的全部html内容
    var studentTemp = $('#student-temp').html();
    //    编译
    var HanStudent = Handlebars.compile(studentTemp);

    //把编译完成的代码放入到 .student-temp 的这个容器中
    $('.student-temp').html(HanStudent(data))


</script>

整个页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        table, th, td {
            border: 1px solid red;
            text-align: center;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>分数</th>
    </tr>
    </thead>
    <tbody class="student-temp">
    <script type="text/x-handlebars-template" id="student-temp">
        <tr>
            <td>{{name}}</td>
            <td>{{age}}</td>
            <td>{{gender}}</td>
            <td>{{fraction}}</td>
        </tr>
    </script>
    </tbody>
</table>


<!--引入jquery/handlebars-->
<script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="./js/handlebars-v4.0.10.js"></script>

<script>
    //    模拟数据
    var data = {
            "name": "柳2",
            "age": '8',
            "gender": '女',
            "fraction": '89'
    };
    console.log(data);

    //    获取到handlebars这个模板中的全部html内容
    var studentTemp = $('#student-temp').html();
    //    编译
    var HanStudent = Handlebars.compile(studentTemp);

    //把编译完成的代码放入到 .student-temp 的这个容器中
    $('.student-temp').html(HanStudent(data))


</script>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容