BaiduTemplate在项目中的用法

BaiduTemplate在项目中的用法

BaiduTemplate是一个简单方便的js模板引擎。可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。
1、语法简单，学习成本极低，开发效率提升很大，性价比较高（使用Javascript原生语法）；
2、默认HTML转义（防XSS攻击），并且支持包括URL转义等多种转义；
3、变量未定义自动输出为空，防止页面错乱；
4、功能强大，如分隔符可自定等多种功能；
使用方法：
1、首先要下载baiduTemplate.js，引入要使用baiduTemplate的页面；
例如：<script type="text/javascript" src="../script/baiduTemplate.js"></script>
2.在html页面写一个模板区块；

<!-- 模板1开始，可以使用script（type设置为text/html）来存放模板片段，并且用id标示 -->
<script id="t:_1234-abcd-1" type="text/html">
<div>
    <!-- 我是注释，语法均为Javascript原生语法，默认分割符为 <% %> ，也可以自定义，参见API部分 -->
    <!-- 输出变量语句，输出title -->
    <h1>title:<%=title%></h1>
    <!-- 判断语句if else-->
    <%if(list.length>1) { %>
        <h2>输出list，共有<%=list.length%>个元素</h2>
        <ul>
            <!-- 循环语句 for-->
            <%for(var i=0;i<5;i++){%>
                <li><%=list[i]%></li>
            <%}%>
        </ul>
    <%}else{%>
        <h2>没有list数据</h2>   
    <%}%>
</div>  
</script>
<!-- 模板1结束 -->

for循环主要用于列表的渲染等
例如：<section class="sheepMsg"> /***将sheepMsg的内容用下面id=“abc”的模板进行渲染***/ </section> <script type="text/html" id='abc'> <%for(var i = 0; i<sheep.length; i++){%> <p class="sheep-number"><span>奶羊编号：</span> <%=sheep[i].number%> </p> <p class="enter-time"><span>录入时间：</span> <%=sheep[i].registered_at%> </p> <p class="line"></p> <%}%> </script>

<script type="text/javascript">
  //使用baidu.template命名空间
  var bt = baidu.template;
  //将值赋给id="abc"的模板
  var html = bt("abc", {sheep:response.sheep});
  //渲染
   document.querySelector(".sheepMsg").innerHTML = html;
</script>

以上就是简单方便的BaiduTemplate引擎，为用户提供了简洁，学习成本低，性价比高
http://wangxiao.github.io/BaiduTemplate/