baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎
应用场景:前端使用的模板系统 或者 后端javascript环境发布页面
功能概述:提供一套模板语法,用户可以写一个模板区域,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。
特性:语法简单,学习成本低,开发效率低,性价比较高(使用的是javascript原生语法),功能强大,如分隔符可以自定义多种功能。
首先肯定的要引入js代码吧!
模板:
<script id="user=list" type="text/html">
<%for (var i = 0;i<list.length;i++)%>
<li>用户名:<%=list[i]%></li>
<%}%>
</script>
把数据交给模板,生成html代码
var html = baidu.template('user-liat',data);
把生成的html代码片段赋值到div中
document.querySelector('.users').innerHTML=html;
artTemplate
性能卓越支持运行时调试,安全,支持预编译,可将模板转换成为非常精简的js文件,模板语法简介,无需前缀引用数据,有简介版本与原生语法版本可选,支持所有流行的浏览器。
快速上手:
编写模板:
和baiduTemplate一样,使用一个type="text/html"的标签存放模板。
<script id="text/html" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} : {{ value }}</li>
{{/each}}
</ul>
</script>
渲染模板
var data = {
title:"标签",
list:['文艺',‘博客’,‘摄影’,‘电影’,‘民谣’]
};
var html = template('text',data);
document.getElemnetById('content').innerHTML = html;
网友评论