打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
js模板引擎,哪个好

js模板引擎
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。

js模板引擎包括如下:
template
官方参考:http://aui.github.io/artTemplate
BaiduTemplate
官方参考:http://baidufe.github.io/BaiduTemplate
juicer
官方参考:http://juicer.name
doT
官方参考:http://olado.github.io/doT
kissy
官方参考:http://docs.kissyui.com和https://github.com/kissyteam/kissy
mustache
官方参考:https://github.com/janl/mustache.js
等等
具体关于模板引擎的使用方法,请参考官网实例。

现在用template和juicer作为demo展示
1、template的例子

<script id="listtemp" type="text/html">    <% if(data.length > 0) { %>        <div>总共<%= total_count %>个数</div>        <div>            <% for(var i = 0; i < data.length; i++) { %>                <div>                    <%= i + 1 %>、                    <a href="http://www.baidu.com/s?wd=<%= data[i].user_id %>"><%= data[i].user_name %></a>                    <div><%= data[i].comment_content %></div>                    <% if(data[i].average_grade > 3) { %>                        <div><%= data[i].average_grade %></div>                    <% } %>                </div>            <% } %>        </div>    <% } else { %>        <div>暂无数据</div>    <% } %></script>
<script type="text/javascript">    var data ={        total_count:"175",        data: [{"user_name":"飞天盗","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大丰董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"质量及做工都非常好,很满意!","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]    };    var html = template.render('listtemp',data);    document.getElementById('content').innerHTML = html;</script>


2、juicer例子

<script id="listtemp" type="text/template">    {@if !!data.length}        <div>总共${total_count}个数</div>        <div>            {@each data as obj,index}                <div>                    <a href="http://www.baidu.com/s?wd=${obj.user_id}">${obj.user_name}</a>                    <div>${obj.comment_content}</div>                    {@if obj.average_grade > 3}                        <div>${obj.average_grade}</div>                    {@/if}                </div>            {@/each}        </div>    {@else}        <div>暂无数据</div>    {@/if}</script>
<script type="text/javascript">    var data ={        total_count:"175",        data: [{"user_name":"飞天盗","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大丰董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"质量及做工都非常好,很满意!","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]        };    var listhtml = document.getElementById('listtemp').innerHTML;    var html = juicer(listhtml,data);    document.getElementById('content').innerHTML = html;</script>

 

//数据源var data ={total_count:"175",data: [{"user_name":"飞天盗","average_grade":"2.0","comment_id":"97180","comment_grade":"1","comment_content":"很好","user_id":"8488867","reply_content":"","up_num":"1","user_avatar":""},{"user_name":"大丰董先生","average_grade":"5.0","comment_id":"97049","comment_grade":"1","comment_content":"质量及做工都非常好,很满意!","user_id":"39541412","reply_content":"","up_num":"1","user_avatar":""}]};


感兴趣的朋友,可以把其他的js模板引擎实例写在回复中,并说说那个模板引擎好。





本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
dedecms首页digg调用方法
Js 多级联动 (三级)
[转]当<script>中的type等于text/html时,我们可以做很多事件!
清爽简洁的图片交替导航效果lya
图片浏览(附带样式+效果)
day12
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服