现在这个项目接触到了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>
本人新手!暂时只学了这么多,如果哪里说的不对,请大虾纠正!