百度模板引擎(baiduTemplate)

2016-11-09  本文已影响0人  宁宁nn

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;

上一篇 下一篇

猜你喜欢

热点阅读