百度template模板技术学习(一)

BaiduTemplate模板 js技术可以生成一套html代码块，根据不同的数据进行动态展示。

特点：

默认的Html转义，变量未定义时输出为空，防止页面错乱，可自定分隔符等，学习成本低， 简单易用。

 目前版本：1.0.6，

使用时需引入 baidutemplate.js文件

定义html代码块格式如下：

<script id="navTemplate" type="text/template">

    <div>

        <% if( list.length >1 ){%>

           <ul>

                <% for(var i=0; i< list.length; i++){%>

                    <li> <%=list[i] %> </li>

                <%}%>

            </ul>

        <%}%>

    </div>

</script>

<script type="text/javascript">

    //list的数据如下所示：json串

    var data = {

            "title": "张三",

           “list”: [

                      'test1',

                       'test2',

                       'test3'

               ]

           };

       //使用baidu.template命名空间绑定模板

      var bt = baidu.template;

      var html = bt('navTemplate', data);

      //将模板内容放置到指定位置

      $(#id).html(html);

 

</script>