美文网首页
百度模板引擎(baiduTemplate)

百度模板引擎(baiduTemplate)

作者: 宁宁nn | 来源:发表于2016-11-09 00:15 被阅读0次

    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;

    相关文章

      网友评论

          本文标题:百度模板引擎(baiduTemplate)

          本文链接:https://www.haomeiwen.com/subject/iqmauttx.html