template.js小白入门篇

最新推荐文章于 2024-06-15 10:51:04 发布

zeng092210

最新推荐文章于 2024-06-15 10:51:04 发布

阅读量3k

点赞数 5

分类专栏： template 文章标签： template

本文链接：https://blog.csdn.net/zeng092210/article/details/84347338

版权

template 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.刚接触template.js记录一下，首先放大招

art-template.js官网：https://aui.github.io/art-template/ 可参考：http://www.jq22.com/jquery-info1097

2.接下来我们看一下这个到底是怎么用？

首先template引入的包有两种，刚开始看到网上介绍的都是{{ }}以这种占位符编写，刚开始还以为是vue到此，结果尴尬了。

经过网上查找和自己尝试，发现（我的包名和你们的不一定一样！！）：

template.js包不支持简化写法；只能用<% %>

template-web.js简洁发和原始语法都可以。

那么写的过程中注意的点：

<%for(var i = 0;i < items.length;i++){%> for前面不加=
<%=items[i].name%> 输出内容前加=
template 的数据绑定方法：
1. // template用下面方法不支持{{}}简洁版
  
  var name = template(document.getElementById('tpl').innerHTML,data);
  
  document.getElementById('wp').innerHTML = name
template-web的数据绑定方法：
1. // template用一下方法支持简洁版
  
  var name = template('tpl',data);
  
  document.getElementById('wp').innerHTML = name
对于绑定对象格式为对象-数组-对象
template-web免费下载地址template-web下载

var data={
        items:[
            {'name':'张三','val':'河北人'},
            {'name':'myself','val':'西藏人'},
            {'name':'李四','val':'天津人'},
            {'name':'王五','val':'云南人'},
            {'name':'马六','val':'上海人'}
        ]
    }

只是初步接触还有许多不了解，听说很牛逼。附上整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="wp"></div>
    <script id="tpl" type="text/html">
        <div>
            <%for(var i = 0;i < items.length;i++){%>
                <div>
                    <%if(items[i].name == "myself"){%>
                        <span style="color:red;"><b>{{items[i].name}}</b></span>
                    <%}else{%>
                        <b>{{items[i].name}}</b>
                    <%}%>
                    <mark>&nbsp;是 </mark>
                    {{items[i].val}}
                </div>
            <%}%>
        </div>
    </script>
<script src="./jquery-1.11.3.min.js"></script>
<script src="./template-web.js"></script>
<script>
    var data={
        items:[
            {'name':'张三','val':'河北人'},
            {'name':'myself','val':'西藏人'},
            {'name':'李四','val':'天津人'},
            {'name':'王五','val':'云南人'},
            {'name':'马六','val':'上海人'}
        ]
    }
    // template用下面方法 不支持{{}}简洁版
    // var name = template(document.getElementById('tpl').innerHTML,data);
    
    // template用一下方法 支持简洁版
    var name = template('tpl',data);
    document.getElementById('wp').innerHTML = name
</script>
</body>
</html>

在ajax下的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="wp"></div>
    <script id="tpl" type="text/html">
        <div>
            <%for(var i = 0;i < msg.length;i++){%>
                <div>
                    <%if(msg[i].name == "myself"){%>
                        <span style="color:red;"><b>{{msg[i].name}}</b></span>
                    <%}else{%>
                        <b>{{msg[i].name}}</b>
                    <%}%>
                    <mark>&nbsp;是 </mark>
                    {{msg[i].val}}
                </div>
            <%}%>
        </div>
    </script>
<script src="./template-web/jquery.min.js"></script>
<script src="./template-web/template-web.js"></script>
<script>
    $.ajax({
        type: "get",
        url: "http://www.blogzl.com/zl_other_module/ajaxTest/postTest.php", //测试接口
        data: "",
        dataType: "json",
        success: function (response) {
            var data={
                msg:[]
            }
            if(response.code == 200){
                for(var key in response.msg){
                    data.msg.push({'name':key,'val':response.msg[key]})
                }
                var name = template('tpl',data);
                document.getElementById('wp').innerHTML = name
            }
        }
    });
</script>
</body>
</html>

zeng092210

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
template.js小白入门篇

1.刚接触template.js记录一下，首先放大招art-template.js官网：https://aui.github.io/art-template/ 可参考：http://www.jq22.com/jquery-info10972.接下来我们看一下这个到底是怎么用？首先template引入的包有两种，刚开始看到网上介绍的都是{{ }}以...
复制链接

扫一扫