[已解决]关于template方法的使用

Ootme

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标签，里面的内容都是空的

最佳答案

月排行榜 / 总排行榜

不二如是

2023-7-19 10:21:26

原因在于：

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的返回值类型,然后选择合适的渲染方法,来实现不同情况下的统一。

跳转到最佳答案楼层

Ootme

求助。。。。

Ootme

求助

不二如是

原因在于：

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的返回值类型,然后选择合适的渲染方法,来实现不同情况下的统一。