自从用angular框架和vue框架,突然回到jquery,有点不习惯,不想用字符串拼接,所以找了一个模板工具,兼容性也比较好:IE8+(IE8 需要补丁才能运行)
template-web.js
模板demo,其中value是值得遍历的元素,i是索引
<!--标签模板容器-->
<ul id="oneLevel" class="one-level"></ul>
<!--标签模板,我一般放在正文html下面-->
<script id="oneLevelList" type="text/html">
{{each $data value i}}
<li data-id='{{value.id}}' data-name='{{value.name}}'>{{value.name}}
<ul class="two-level"></ul>
</li>
{{/each}}
</script>
js中绑定使用(浏览器版本无法加载外部文件,filename 为存放模板的元素 id:oneLevelList)
$('#oneLevel').html(template('oneLevelList', data.data));
API
http://aui.github.io/art-template/zh-cn/docs/installation.html
这是官网中的API链接,在jquery框架中使用,我是直接下载template-web.js,通过script引用
功能很全,里面有详细的使用方法和功能讲解
总结
对工具的一个记录