baiduTemplate 基本知识总结

html

<div id="tem1"></div>
<div id="tem2"></div>
<!--可以使用textarea定义模板 使用css display none 并且用id来标示-->
<textarea id="t:myTem3" style="display: none;">
    <h3>title:<%=title%></h3>
    <%if(list.length>0){%>
        <ul>
            <!--循环语句for-->
            <%for(var i=0; i< list.length;i++){%>
            <li><%=list[i].name%></li>
 　　　　　　　　<%}%>
　　　　　　 </ul> 
　　　<%}else{%> 
　　　　　　<div>没有数据！</div> 
　　<%}%> 
</textarea>
<div id="tem3"></div>

 

template

<!--可以使用script标签 type='text/html' 来定义模板，并且用id来标示-->
<script type="text/html" id="t:myTem1">
<!--语法均为javascript的原生语法，默认分隔符是<% %>也可以自定义-->
    <%* 输出变量语句   <%=%> 等号不要忘记了！！！！！*%>
    <h3>title:<%=title%></h3>
    <%if(list.length>0){%>
        <ul>
            <!--循环语句for-->
            <%for(var i=0; i< list.length;i++){%>
                 <li><%=list[i].name%></li>
            <%}%>
        </ul>
    <%}else{%>
        <div>没有数据！</div>
    <%}%>
</script>
<!--可以使用使用字符串定义模板 并且用id来标示-->
<script type="text/javascript" id="t:myTem2">
  var tmp2='<h3>title:<%=title%></h3>\
            <%if(list.length>0){%>\
            <ul>\
                <%for(var i=0; i< list.length;i++){%>\
                    <li><%=list[i].name%></li>\
                  <%}%>\
            </ul>\
             <%}else{%>\
                    <div>没有数据！</div>\
                <%}%>';
</script>

使用模板

<!--使用模板-->
<script type="text/javascript">
    var data={
        title:"this is my baiduTemplate",
        list:[
            {name:'zhangSan'},
            {name:'liSi'},
            {name:'wangWu'},
            {name:'zhaoLiu'},
            {name:'zhaoLiu2'}
        ]
    }
    /*使用baidu.template 的命名空间*/
    var bt=baidu.template;
    /*最简单的使用方法*/
    /*传入模板的id*/
    var html=bt('t:myTem1',data);//或者直接使用 varhtml=baidu.tempalte('t:myTem1',data);
    /*传入模板字符串*/
    var html2=bt(tmp2,data);
    /*可以先传入模板id，不传入id，返回的是模板函数*/
    var fun=bt('t:myTem3');
    /*然后传入data生成不同的HTML片断*/
    var html3=fun(data);
    document.getElementById("tem1").innerHTML=html;
    document.getElementById("tem2").innerHTML=html2;
    document.getElementById("tem3").innerHTML=html3;
</script>

 

 

 

总结：

1 定义模板 使用script type为 text/html或者text/template  需要使用id标示   火或者存放在textarea中，使用css dispaly none; 使用id标示

demo

<script id='test1' type="text/template">
<!-- 模板部分 -->

<!-- 模板结束 -->   
</script>

<script id='test2' type="text/html">
<!-- 模板部分 -->

<!-- 模板结束 -->   
</script>

<textarea id='test3' style='display:none;'>
<!-- 模板部分 -->

<!-- 模板结束 -->   
</textarea>

模板也可以直接存储在一个变量中

var tpl = "<!-- 模板开始 --> 模板内容 <!-- 模板结束 -->";

2 分隔符为<%%>

3 直接输出变量 <%= arg%>

4 使用js语法 需要使用<%%>分隔符与html语句分隔开

5 使用baiduTemplate  使用变量接收baidu.template 的命名空间  

　　baiduTemplate 占用baidu.template 命名空间

　　可以赋值给一个短名变量使用

　　var bt=baidu.template;

6 使用原生的javascript

7 调用引擎的方式   数据结构是一个JSON

8 生成对应的html片断      tpl是传入的模板类型，可以是模板id，可以是一个模板片断字符串，传入模板和对应的数据返回对应的HTML片断

　　

//方法一：直接传入data，返回编译后的HTML片段
var html0 = baidu.template(tpl,data);  

//或直接传入id即可
var html0 = baidu.template('test1',data);

或者可以只传入tpl，这时返回的是一个编译后的函数，可以把这个函数缓存下来，传入不同的data就可以生成不同的HTML片段

//方法二：先不传入data，返回编译后的函数
var fun = baidu.template(tpl);
//或直接传入id即可
var fun = baidu.template('test1');

//之后通过改变数据，调用缓存下来的函数，产生不同的HTML片段
var html1 = fun(data1);
var html2 = fun(data2);

最后将他们插入到一个容器中即可

document.getElementById('result0').innerHTML=html0;
document.getElementById('result1').innerHTML=html1;
document.getElementById('result2').innerHTML=html2;

 

模板基本语法(默认的分隔符是<%%>，也可以是自定义)
分隔符内语句为js语法，如：

<%
　　var test=function(){//函数体}
　　if(){}else{}
function testFun(){
　　return;
}
%>

注释：

<!-- 模板中可以使用HTML注释--> 或者<%*这是模板自带的注释格式*%>

<% //分隔符内部支持js注释%>

输出一个变量

/%*输出一个变量 *%/
    <!--默认html转义，如果变量未定义，输出为空-->
    <%=title%>或者<%:h=title%>
    <!--不转义-->
    <%:=title%> 或者是 <%-title%>
    //url转义 UI变量使用在模板链接地址URl的参数中时，需要转义
    <%:u=title%>
    <!--UI变量使用在HTML页面标签onclick等事件函数参数中需要转义-->
    //“<”转成“&lt;”、“>”转成“&gt;”、“&”转成“&amp;”、“'”转成“\&#39;”
    //“"”转成“\&quot;”、“\”转成“\\”、“/”转成“\/”、\n转成“\n”、\r转成“\r”
    <%:v=title%>

判断语句

<%if(list.length>0)%>
    <div><%=list.length%></div>
    <%else{%>
        <div>list的长度为0</div>
   <%}%>

循环语句

<%for(var i=0; i< list.length; i++){%>
       <li><%=list[i].name%></li>
       <% }%>

 用户自定义分隔符   默认是<%%>    -------不推荐使用

//设置左分隔符为 <!
baidu.template.LEFT_DELIMITER='<!';

//设置右分隔符为 <!  
baidu.template.RIGHT_DELIMITER='!>';

自定义默认输出变量是否自动HTML转义--------不推荐使用

//设置默认输出变量是否自动HTML转义，true自动转义，false不转义
baidu.template.ESCAPE = false;

10 对于不存在的数据，baiduTemplate做了很好的处理，使用空字符串来代替，而不是undifined这样的对象未定义

也可以把模板抽到一个文件中，需要时再使用demo
tem.html

<!--可以使用使用字符串定义模板 并且用id来标示-->
<h3>tmp:title:<%=title%></h3>
<%if(list.length>0){%>
<ul>
    <%for(var i=0; i< list.length;i++){%>
    <li><%=list[i].name%></li>
    <%}%>
</ul>
<%}else{%>
<div>没有数据！</div>
<%}%>

主页面 html

<div id="tem"></div>

主页面 js

var data={
    title:"this is my baiduTemplate\\",
    list:[
        {name:'zhangSan'},
        {name:'liSi'},
        {name:'wangWu'},
        {name:'zhaoLiu'},
        {name:'zhaoLiu2'}
    ]
}

$.ajax({
        url:'templates/tem.html',
        dataType:'html',
        success:function(tmp){
            var html=bt(tmp,data);
            document.getElementById("tem").innerHTML=html;
        }

    });

ajax获取模板页面，在success中渲染页面。

参考1   http://baidufe.github.io/BaiduTemplate/