h5使用script type=“text/html“构建模板，动态改变模板内容

最新推荐文章于 2021-06-21 14:29:18 发布

小星博博

最新推荐文章于 2021-06-21 14:29:18 发布

阅读量3.2k

点赞数

文章标签： templates

本文链接：https://blog.csdn.net/baidu_39105563/article/details/113952034

版权

目前本人知道的模块插件就2个，一个是：template_js，另外一个是Mustache
直接通过静态资源托管库在页面中引入就好
注意：以下内容只是用案例，生产环境请根据实际情况更改相应内容
1、template的使用方法

<!--引入template-->
<script crossorigin="anonymous" integrity="sha512-KsDmkrHAdjPgNO8np1KW4xQV74Zd9dDmE7L29kq7tMoVo9QFHDrlBv8y38Lw3hTAoayqGykBPJ2QHfWqBhX7cw==" src="https://lib.baomitu.com/template_js/0.8.0/template.min.js"></script>
<!--template模板渲染位置-->
<div id="templatelist"></div>   //要渲染的位置
            
 
<script type="text/html" id="template1">
    <ul>
    <% for(var i = 0;i < list.length;i++){ %>
                    
        <li>
            <p><%= list[i].name %></p>
            <p><%= list[i].sex %></p>
        </li> 
                
    <% } %>
    </ul>
</script>
 
<script>
 
    // 准备好的数据源，可以是通过网络获取的json数据，也可以是通过ajax从后台拿到的数据
    var data = [{name:"张三",sex:"女"},{name:"李四",sex:"男"},{name:"王五",sex:"女"}]
 
    // 模板渲染
    var template1 = $('template1').innerHTML;
    $('templatelist').innerHTML = template(template1,{list:data});
</script>

2、Mustache的使用方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入mustache-->
        <script crossorigin="anonymous" integrity="sha512-HYiNpwSxYuji84SQbCU5m9kHEsRqwWypXgJMBtbRSumlx1iBB6QaxgEBZHSHEGM+fKyCX/3Kb5V5jeVXm0OglQ==" src="https://lib.baomitu.com/mustache.js/4.1.0/mustache.min.js"></script>
    </head>
    
 
    <body>
        <div id="user_info"></div>
    </body>
    <script type="text/tmplate" id="tmplate">
        <div>
            <ul>
                <li>姓名：{{user.name}}</li>
                <li>年龄：{{user.age}}</li>
                <li>性别：{{user.sex}}</li>
            </ul>
        </div>
    </script>
 
    <script type="application/javascript">
        //实例参数
        var user = { name: "张三", age: 18, sex: "男"};
        //模板
        var template =$("#tmplate").innerHTML;
        //使用mustache.js进行模板解析填充数据
        var view = Mustache.render(template, user);
 		//把模板追加到页面中
        $("$user_info").innerHTML = view;
    </script>
</html>