jquery.tmpl的坑,多节点模板只返回一个节点的问题

项目中用到一个处自定义模板,即模板的内容需要根据需求来编写,供其它地方使用,用数据库来保存这些模板,这就需要用到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);

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值