zoukankan      html  css  js  c++  java
  • handlebars使用DEMO

    <!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" />
    <title>handlebars_v2.0_demo</title>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/handlebars-v2.0.0.js"></script>
    </head>
    
    <div id="demo">
    
    </div>
    
    
    
    <script id="user-template" type="text/x-handlebars-template">
    	<h1>{{time}}</h1>
    	{{#each user}}
    		<p>
    			{{#if name}}
    				{{@index}}. 
    				姓名:{{name}}
    				年龄:{{age}}
    				成年:{{Adult age}}
    				{{#Compare age 18 }}
    				大于等于18岁
    				{{else}}
    				小于18岁
    				{{/Compare}}
    				记录时间:{{../../time}}			
    			{{/if}}
    
    		</p>
    	{{/each}}
    </script>
    <script>
    $(function(){
    	var data = {
    			user:[{
    				name:"sky",
    				age:28
    				},{
    				name:"json",
    				age:10
    				},{
    				age:2
    				},{
    				name:"joy",
    				age:18
    				}],
    			time:"2014-12-26"
    		}
    	var myTemplate = Handlebars.compile($("#user-template").html());
    	Handlebars.registerHelper("Adult",function(age){return (age >= 18) ? "成年" : "未成年";});
    	Handlebars.registerHelper("Compare",function(i1,i2,options){if(i1>=i2) {return options.fn(this); }else {return options.inverse(this);}});
    	$("#demo").html(myTemplate(data));
    })
    </script>
    
    
    <div id="demo2">
    
    </div>
    <script id="class-template" type="text/x-handlebars-template">
    	{{#each this}}
    		<dl>
    			<dt>{{class}} 共有{{group.count}}个小组 班长:{{student.[0].name}}</dt>
    			{{#with student}}
    			{{#each this}}
    			<dd>{{name}}</dd>
    			{{/each}}
    			{{/with}}
    		</dl>
    	{{/each}}
    </script>
    <script>
    $(function(){
    	var data2 = [
    		{
    			class:"一年级",
    			student:[{
    					name:"王晓飞"
    				},{
    					name:"陈扇"
    				},{
    					name:"理查德"
    				}],
    			group:{
    				count:6
    				}
    			
    		},
    		{
    			class:"二年级",
    			student:[{
    					name:"朱暖"
    				},{
    					name:"张坚庭"
    				},{
    					name:"刘海得"
    				}],
    			group:{
    				count:8
    				}
    		}]
    	var myTemplate = Handlebars.compile($("#class-template").html());
    	$("#demo2").html(myTemplate(data2));
    })
    </script>
    
    
    <div id="demo3">
    
    </div>
    <script id="class2-template" type="text/x-handlebars-template">
    	{{#each this}}
    		<dl>
    			<dt>{{class}}</dt>
    			{{#with student}}
    			{{#each this}}
    			<dd>{{this}}</dd>
    			{{/each}}
    			{{/with}}
    		</dl>
    	{{/each}}
    </script>
    <script>
    $(function(){
    	var data2 = [
    		{
    			class:"一年级",
    			student:[
    					"王晓飞",
    					"陈扇",
    					"理查德"
    				]
    		},
    		{
    			class:"二年级",
    			student:[
    					"朱暖",
    					"张坚庭",
    					"刘海得"
    				]
    		}]
    	var myTemplate = Handlebars.compile($("#class2-template").html());
    	$("#demo3").html(myTemplate(data2));
    })
    </script>
    <body>
    </body>
    </html>
    

      

    点击下载:

    js_demo_handlebars.rar

  • 相关阅读:
    php ajax分页的例子,在使用中
    PHP远程文件管理,可以给表格排序,遍历目录,时间排序
    背景变暗的div可拖动提示窗口,兼容IE、Firefox、Opera
    CSS简洁的左侧菜单(侧拉菜单,向右显示)
    无间断循环滚动(兼容IE、FF)
    poj 1007 求逆序数
    poj 1775 简单搜索
    面向对象之继承和组合浅谈
    在flex中导入fl包
    C99中包括的特性
  • 原文地址:https://www.cnblogs.com/hack0573/p/4187256.html
Copyright © 2011-2022 走看看