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/