js模板baidu template简单入门

现在这个项目接触到了js模板，刚开始做demo的时候吃了点亏，在这就当自己对之前知识整理一下吧！

由于我是jsp页面上嵌套的js模板，而baidu template的标签默认是<% %> ！ 这个标签与jsp中写java代码的标签是一样的，避免冲突我们首先要改一下baidu template的原文件：

<span style="font-size:14px;"> //自定义分隔符，可以含有正则中的字符，可以是HTML注释开头 <! !>
bt.LEFT_DELIMITER = bt.LEFT_DELIMITER||'<%';
bt.RIGHT_DELIMITER = bt.RIGHT_DELIMITER||'%>';</span>

改为

<span style="font-size:14px;"> //自定义分隔符，可以含有正则中的字符，可以是HTML注释开头 <! !>
bt.LEFT_DELIMITER = bt.LEFT_DELIMITER||'<#';
bt.RIGHT_DELIMITER = bt.RIGHT_DELIMITER||'#>';</span>

那样你就可以用<# #>标签去表示你的js文档了！！

接下来上代码（逐条解释的）：

<span style="font-size:14px;">msg={"message":"ok","data":[{"name":"zhang","age":"1"},{"name":"yy","age":"2"}]}  是类似这样的json对象
var bt=baidu.template;
var html=bt('result',msg);//result对应下面script的id
document.getElementById('list').innerHTML=html;//这个list就是下面tbody的id 也就是你要放到html页面的位置
</span>

<span style="font-size:14px;"><script id="result" type="text/html">//类型可以写成text/html 或者 text/template
</span><pre name="code" class="javascript"><span style="font-size:14px;">//data相当于是msg对象的一个属性，而data是一个json对象数组，记住i<data.length不要写成i<msg.data.length
//下面的也一样.msg省略，直接写属性！
</span>

<#for(var i=0 ;i<data.length ;i++){#><tr><td><#=data[i].name#></td><td><#=data[i].age#></td></tr> <#}#></script>

<span style="font-size:14px;"><tbody id="list">
</tbody></span>

本人新手！暂时只学了这么多，如果哪里说的不对，请大虾纠正！