项目中用到一个处自定义模板,即模板的内容需要根据需求来编写,供其它地方使用,用数据库来保存这些模板,这就需要用到jquery.tmpl的自定义模板功能。
当编写模板时,发现有些模板使用没有问题,但是个别模板在编译完后只返回了第一个html节点的信息,真正想要的html代码一个都没有,这就让人摸不着头脑了。后来反复对比了几个模板的差异,发现正常的模板都是一个顶级节点,其它不正常的都存在多个平行的html节点,原因就在这里了。后来把多个平行节点的代码外层再加一个顶级节点,再一测试发现OK了。
下面这段是显示正常的内容
<div>
{{if a==1}}
<p>这是正常显示的内容, a=1</p>
{{else}}
<p>这是a!=1的内容</p>
{{/if}}
<div>
这是第1段内容
</div>
<div>
这是第2段内容
</div>
<div>
这是第3段内容
</div>
</div>
下面这段内容就会有问题了,它有几个平行节点,这段内容只返回“这是第1段内容”,后面的内容被忽略了
<div>
这是第1段内容
</div>
<div>
这是第2段内容
</div>
<div>
这是第3段内容
</div>
自定义模板实现代码:
//创建模板
$.template('template', "这是模板的内容"); //模板内容请参照上面的代码
//使用自己的数据渲染模板
var tmpl = $.tmpl('template',{a: 1});
var html = tmpl.prop("outerHTML");
console.log(html);