js模板引擎

原创 2016年05月31日 14:20:08

http://www.cnblogs.com/guohu/p/3870677.html这篇博客对比了各种模板引擎的速度 最后还是选择artTemplate.js来展示数据

1.这里模板引擎我在项目中的使用

 <ul class="flag-list clearfix" id="teamsHtml">
                    <script id="teamsData" type="text/html">
                        <% for(var i = 0; i < result.length; i++) { %>
                        	<li>
                            	<div class="flag-img"><img src="<%=result[i].logo %>" alt="" class="ie6png" /></div>
                                <p><input type="checkbox" name="teamStrong"/></p>
                                <p class="flag-name"><%=result[i].team %></p>
                            </li>
                        <% } %>
                    </script>
                </ul>

function getTeams() {
        WebsiteAjax.getInstance({
            ajaxUrl : urlPrefix + "team/getTeams",
            type : "GET",
            dataType : "JSONP",
            succesMethod : function(data, textStatus) {
                var html = template.render("teamsData", data);
                $("#teamsHtml").html(html);
            },
            errorCallMethod : function(data, status) {
              
            },
            errorMethod : function() {
            }
        });  
    }
本质是ajax请求后台,后台返回数据data是个json对象,将返回的对象交给模板来展示,模板的语法可以参考artTemplate 的讲解。

在<script></script>标签中要注意的是可以直接使用data对象的属性 我的data对象装的是List<?>类型的属性名是result,则可以直接循环result对象来进行数据展示

2.下面的代码是有if判断的写法,可以参考一下

<script id="preVerusesData" type="text/html">
<% for(var i = 0; i < result.length; i++) { %>
    <li>
    <div class="contest-team">
<span style="white-space:pre">	</span>       <span class="contest-match w102">
            <span style="white-space:pre">	</span><img src="<%=result[i].team1_logo %>" alt="" class="ie6png" />
                <p class="match-name f14 fb"><%=result[i].team1_name %></p>
            </span>
            <em class="contest-vs w56 fb">VS</em>
            <span class="contest-match w102">
<span style="white-space:pre">	</span>          <img src="<%=result[i].team2_logo %>" alt="" class="ie6png" />
                <p class="match-name f14 fb"><%=result[i].team2_name %></p>
            </span>
        </div>
        <div class="contest-score f14">
        <span style="white-space:pre">	</span></span><span class="w102"><input type="radio" name="pk_date<%=i%>" value="radio" <%if(result[i].pk_result == 3){%><%='checked'%><%}%> /><br/>胜</span>
            <span class="w56"> <input type="radio" name="pk_date<%=i%>"  value="radio" <%if(result[i].pk_result == 2){%><%='checked'%><%}%> /><br/>平</span>
            <span class="w102"><input type="radio" name="pk_date<%=i%>" value="radio" <%if(result[i].pk_result == 1){%><%='checked'%><%}%> /><br/>负</span>
        </div>
    </li>
 <% } %>
</script>

3.下面是artTemplate外部函数的调用针对日期格式的处理

 /** 
     * 对日期进行格式化, 
     * @param date 要格式化的日期 
     * @param format 进行格式化的模式字符串
     *     支持的模式字母有: 
     *     y:年, 
     *     M:年中的月份(1-12), 
     *     d:月份中的天(1-31), 
     *     h:小时(0-23), 
     *     m:分(0-59), 
     *     s:秒(0-59), 
     *     S:毫秒(0-999),
     *     q:季度(1-4)
     * @return String
     * @author yanis.wang
     * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
     */
    template.helper('dateFormat', function (date, format) {
        date = new Date(date);
        var map = {
            "M": date.getMonth() + 1, //月份 
            "d": date.getDate(), //日 
            "h": date.getHours(), //小时 
            "m": date.getMinutes(), //分 
            "s": date.getSeconds(), //秒 
            "q": Math.floor((date.getMonth() + 3) / 3), //季度 
            "S": date.getMilliseconds() //毫秒 
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t){
            var v = map[t];
            if(v !== undefined){
                if(all.length > 1){
                    v = '0' + v;
                    v = v.substr(v.length-2);
                }
                return v;
            }
            else if(t === 'y'){
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
    });


代码中对日期函数的使用


<script id="lastestLotteryData" type="text/html">
                            <% for(var i = 0; i < result.length; i++) { %>
                    	       <li><span class="t1"><%=result[i].player %></span><span class="t2"><%=dateFormat(result[i].date, 'yyyy-MM-dd')%></span><span class="t3">获得【<%=result[i].soccerlotteryPrize%>】</span></li>
                             <% } %>
                        </script>


arttemplate.js的简洁语法是不支持用自定义变量的比如想for循环i 这样就不支持,但是如果想在jsp页面使用<%%>如此的语法又会和jsp命令产生冲突,这时候就需要修改arttemplate.js的源码修改开始标签和结束标签

 template.openTag = "<$";
 template.closeTag = "$>";

如此修改后就不会与后端语言产生冲突了

4.下面是用也是对模板引擎使用的例子

<script type="text/html" id="moreCompareData">
<tbody class="comparison_more" >
    <tr class="play_top">
		<$for(i = 0; i < roleWeekRanks.length;i++) {$>
    		<td class="td<$=roleWeekRanks[i].accountid$>"><$=roleWeekRanks[i].name$><sup onclick="delCompare('<$=roleWeekRanks[i].accountid$>')"><a href="javascript:;"><img src="/img/close_ico.png" class="ie6png" title="关闭" /></a></sup></td>	
		<$}$>
    </tr>
	<$for(j = 0;j < maxs.length;j++) {$>
        <tr>
			<$for(k = 0; k < roleWeekRanks.length;k++) {$>
        		<td class="td<$=roleWeekRanks[k].accountid$> <$if(roleWeekRanks[k][maxs[j].key] == maxs[j].val && maxs[j].key != 'vehicleName') {$><$='color_g'$><$}$>"><$=roleWeekRanks[k][maxs[j].key]$></td>
			<$}$>
        </tr>
	<$}$>
</tbody>
</script>

该例子里面演示了roleWeekRanks[k].属性 也可以用roleWeekRanks[k][属性]的方式来获取值


5.下面演示了模板切换报错的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content='最后一炮,最后一炮官网,FF,最后一炮激活码,最后一炮下载,finalfire' />
		<meta name="description" content='《最后一炮》(别名FF或finalfire)最新3D载具射击巨制,海陆空竞技,开启载具射击网游革命。中国现役及世界尖端装备亮相,动态战场,物理拟真系统,全场景破坏,高'/>
		<script src="template-native.js"></script>
		<script src="http://static.zqgame.com/js/jquery-1.7.2.min.js"></script>
	</head>
	<body>
		<div id="content">
			<script id="test1"  type="text/html">
			 <% for(i = 0; i < list.length; i ++) {%>
	        	<li>条目内容 <%=i + 1%> :<%=list[i]%></li>
	    	 <% } %>
			</script>

			<script id="test2"  type="text/html">
				 <% for(i = 0; i < list.length; i ++) {%>
		        	<li>条目内容 <%=i + 1%> :<%=list[i]%></li>
		    	 <% } %>
			</script>
	    </div>
	    <input id="clickMeBT" type="button" value="clickMe"/>
	</body>

	<script type="text/javascript">
		var data1 = {
			title: '基本例子',
			isAdmin: true,
			list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
		};
		var data2 = {
			title: '基本例子',
			isAdmin: true,
			list: ['文艺1', '博客1', '摄影1', '电影1', '民谣1', '旅行1', '吉他1']
		};
		var arr = [];
		arr.push(data1);
		arr.push(data2);
		var i = 0;
		$("#clickMeBT").click(function() {
			//template('test1', "");	
			//template('test2', "");
			var html = "";
			if(i == 0) {
				html = template('test1', arr[0]);	
				i = 1;
			} else {
				html = template('test2', arr[1]);	
				i = 0;
			}
			$("#content").html(html);
		});
	</script>
</html>

上面的代码中当点击clickMe的时候想做切换模板数据的操作,但是会报template erro的错误,貌似使用模板的时候都要在文档加载的时候先填充一遍数据,如果文档加载时你并没有使用该模板来填充数据,再次使用该模板的时候就会发送模板不存在的提示

所以想做模板切换只能修改代码如下

$("#clickMeBT").click(function() {
	//template('test1', "");	
	//template('test2', "");
	html1 = template('test1', arr[0]);
	html2 = template('test2', arr[1]);	

	var html = "";
	if(i == 0) {
		html = html1
		i = 1;
	} else {
		html = html2;
		i = 0;
	}
	$("#content").html(html);
});
先把模板数据填充再切换内容的HTML

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

mustache.js javascript模板引擎

  • 2014年07月30日 16:37
  • 66KB
  • 下载

node.js第十五课(模板引擎)

一、什么是模版引擎 模版引擎是一个从页面模版根据一定的规则生成HTML的工具,PHP首发,随后出现了ASP、JSP都沿用这个模式,即建立一个HTML页面模版,插入可执行的代码。运行时动态生成HTML...

简单小巧js模板引擎

  • 2015年03月12日 08:52
  • 2KB
  • 下载

腾讯的js模板引擎template.js

  • 2017年05月24日 11:35
  • 5KB
  • 下载

百度JS模板引擎 baiduTemplate

百度JS模板引擎 baiduTemplate应用在前端模版系统或则后端JavaScript的环境发布页面,它提供了一套模版语法,用户可以写一个模版区块,每次根据传入的数据生成对应数据产生的Html,渲...

JS模板引擎---mustache与HandleBars

JS模板引擎—mustache与HandleBars以前总听说模板引擎这个东西然而却没有研究过,这两天研究了一下模板引擎,最开始接触了mustache,它是一个客户端的模板引擎。 然后想了解一下服务端...

JS模板引擎jTemplates使用笔记详解

jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现,可以配合AJAX,JSON一起协同工作,模板内容可以用JS代码,实现了活动更新,可以自动从服务器更新模板生成的内...

在校学习任务实践--任务一:页面开发(图片轮播,js模板引擎,倒计时等功能)

一、要求  前端工程师需要在HTML/CSS/JavaScript三大语言具备扎实的基础,良好的PC/移动端页面重构能力,以及一定的浏览器调试及性能优化技巧,在此基础上掌握常用前端框架及自动化工...

JS前端模板引擎实现

简单前端模板引擎实现标签(空格分隔): javascriptAbsurdJS本身主要是以NodeJS的模块的形式发布的,不过它也会发布客户端版本。考虑到这些,我就不能直接使用现有的引擎了,因为它们大部...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js模板引擎
举报原因:
原因补充:

(最多只允许输入30个字)