关于template方法的使用
本帖最后由 Ootme 于 2020-8-1 17:54 编辑1. var html = template('usertpl', {data: response});
$('#userBox').html(html);
2. var html = template('tp1',data);
console.log(html)
//show
document.getElementById('container').innerHTML=html
两个data都差不多，为什么这两个显示的方法不一样，而且不能共通
第一个是tbody标签，第二个是div标签，里面的内容都是空的 求助。。。。 求助 原因在于：
template()方法的返回值类型不同,导致后续的渲染方式不一样。
第一个template('usertpl', {data: response})返回的是一个字符串,包含tbody和tr、td等标签。
然后通过$('#userBox').html(html)将这个字符串作为HTML代码插入到userBox这个table中,相当于直接插入tbody。
第二个template('tp1', data)返回的可能是一个DocumentFragment对象,它不是一个完整的HTML字符串,需要附加到DOM树中。
所以不能直接插入innerHTML,需要先获取一个容器节点,然后使用 container.appendChild(template()) 将DocumentFragment对象附加上去。
两者返回值类型不同,所以渲染方式不一样。
如果想统一,可以考虑:
1. 都返回字符串,然后都用innerHTML插入
2. 都返回DocumentFragment,然后都用appendChild插入
3. 用JavaScript生成DOM节点,不使用template
4. 使用更高级的框架,比如Vue、React统一渲染方式
主要还是要注意template的返回值类型,然后选择合适的渲染方法,来实现不同情况下的统一。
页:
[1]