javascript前端模板引擎框架artTemplate使用总结 - CSDN博客
程序员文章站
2022-03-30 15:02:14
...
artTemplate是腾讯开源的前端模板框架,和mustache,handlerbars类似,在web项目中可以很方便的使用,上手快,如果用过mustache,那么几乎可以快速切换到template框架上来。
学习过程:
1、语法介绍:
数据绑定:与angularjs类似,只不过视图与模型是单向的绑定,模型改变,视图改变,反过来则不行。
<script id="tpl1" type="text/template"> <h1>1、data mapping example</h1> <h2>{{message}}</h2> </script> //js中使用模板渲染 var data1 = {message:"hello,artTemplate is a javasript framework."}; $("node1").innerHTML = template("tpl1",data1);
条件判断:这里支持单一的if,也可以加入else分支,没有else if分支。
{{if isShow}} <h3>(2、满足条件展示消息:{{message}}</h3> {{else}} <h3>(2x、条件不满足,展示默认消息</h3> {{/if}}
遍历集合:
{{each list as item index}} <h3>the index of message is : {{index+1}} -> {{item}}</h3> {{/each}}
辅助函数:可以用来将后端请求的数据进行映射,比如1->正常,0->错误。在使用的时候仅需要在表达式后面通过"|func"的方式就可以,比如{{message | filterhandler}},其中filterhandler为自定义的辅助函数。
先定义一个辅助函数,这里定义的是一个简单的转换日期格式函数。
template.helper("date2str",function(date){ var today = new Date(date); var year = today.getFullYear(); var month = today.getMonth()+1; if(month<10)month = "0"+month; var day = today.getDate(); if(day<10)day = "0"+day; return year+"-"+month+"-"+day; });
使用辅助函数
<p id="node4"></p> <script id="tpl4" type="text/template"> <h1>4、template.helper func example</h1> <h3>today is {{datenow | date2str}}</h3> </script> //js代码中调用 var data4 = {datenow:new Date()}; $("node4").innerHTML = template("tpl4",data4);
预编译:与使用模板不同的是,预编译需要的是一个string类型的文档片段,然后将数据交给预编译后的模板进行渲染。
var tpl5 = "<h1>5、compile example</h1><h3>this is a string the type is not {{type}}</h3>"; $("node5").innerHTML = template.compile(tpl5)({type:"text/template"});
引用子模板:
<p id="node6"></p> <script id="tpl6" type="text/template"> <h1>6、include child template example</h1> <p class="parenttemplate"> <h3>parent template</h3> {{include 'tpl6-child'}} </p> </script> <script id="tpl6-child" type="text/template"> <p class="childtemplate"> <h3>child template</h3> </p> </script>
2、下载template.js库,引入到html文件中。<script type="text/javascript" src="template.js"></script>
3、这里给出一个综合的例子,将前面介绍的一些语法练习一下:
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>artTemplate example</title> <style type="text/css"> *{margin:0;} h1,h2,h3{margin:3px;} h2,h3{text-indent:20px;} .parenttemplate{background:#ccc;width:600px;height:60px;} .childtemplate{background:lightblue;} </style> <script type="text/javascript" src="template.js"></script> <script> function $(id){return document.getElementById(id);} window.onload = function(){ //data mapping var data1 = {message:"hello,artTemplate is a javasript framework."}; $("node1").innerHTML = template("tpl1",data1); //if condition var data2 = {isShow:true,message:"hello,template"}; $("node2").innerHTML = template("tpl2",data2); data2.isShow = false; $("node2x").innerHTML = template("tpl2",data2); //list foreach var data3 = {list:["Javascript","JQuery","artTemplate"]}; $("node3").innerHTML = template("tpl3",data3); //helper function template.helper("date2str",function(date){ var today = new Date(date); var year = today.getFullYear(); var month = today.getMonth()+1; if(month<10)month = "0"+month; var day = today.getDate(); if(day<10)day = "0"+day; return year+"-"+month+"-"+day; }); var data4 = {datenow:new Date()}; $("node4").innerHTML = template("tpl4",data4); //compile example var tpl5 = "<h1>5、compile example</h1><h3>this is a string the type is not {{type}} </h3>"; $("node5").innerHTML = template.compile(tpl5)({type:"text/template"}); $("node6").innerHTML = template("tpl6",{}); //escape html $("node7").innerHTML = template("tpl7",{message:"<span>escape html tag</span>"}); } </script> </head> <body> <p id="node1"></p> <script id="tpl1" type="text/template"> <h1>1、data mapping example</h1> <h2>{{message}}</h2> </script> <p id="node2"></p> <p id="node2x"></p> <script id="tpl2" type="text/template"> <h1>2、if condition example</h1> {{if isShow}} <h3>(2、满足条件展示消息:{{message}}</h3> {{else}} <h3>(2x、条件不满足,展示默认消息</h3> {{/if}} </script> <p id="node3"></p> <script id="tpl3" type="text/template"> <h1>3、list example</h1> {{each list as item index}} <h3>the index of message is : {{index+1}} -> {{item}}</h3> {{/each}} </script> <p id="node4"></p> <script id="tpl4" type="text/template"> <h1>4、template.helper func example</h1> <h3>today is {{datenow | date2str}}</h3> </script> <p id="node5"></p> <p id="node6"></p> <script id="tpl6" type="text/template"> <h1>6、include child template example</h1> <p class="parenttemplate"> <h3>parent template</h3> {{include 'tpl6-child'}} </p> </script> <script id="tpl6-child" type="text/template"> <p class="childtemplate"> <h3>child template</h3> </p> </script> <p id="node7"></p> <script id="tpl7" type="text/template"> <h1>7、escape html tag example</h1> <h3>origin expression : {{#message}}</h3> <h3>after escape ==> : {{message}}</h3> </script> </body> </html>
运行这个示例,可以得到如下的效果:
以上就是javascript前端模板引擎框架artTemplate使用总结 - CSDN博客的详细内容,更多请关注其它相关文章!
上一篇: node下使用UglifyJS压缩合并JS文件的方法
下一篇: yii2安装详细流程_php实例