master

分支 (2)

管理

管理

master

development

PithyJt
/
demo.html

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="resources/utils.js" charset="utf-8"></script>
	<script type="text/javascript" src="src/pithy.teemplate.js" charset="utf-8"></script>
	<script type="text/javascript" src="src/pithy.teemplate.helper.js" charset="utf-8"></script>

	<title>Pithy.js.teemplate / Demo</title>
	<style type="text/css">
		.container {width:100%; display: flex;}
		.container>div{flex:1; padding-right:20px}
		.container .result>textarea{width:100%;height:600px; padding:5px;outline:none;resize:none;font-family:'微软雅黑', arial;}
	</style>
</head>
<body>
	<h2>Pjt示例</h2>
	<div class="container">
		<div class="result render-result"><h3>渲染结果</h3><div id="result"></div></div>
	</div>

	<script>
		var data = {
			name : 'anlige',
			age : 23,
			list : [
				{date : '1986-9-1', text : 'birthday'},
				{date : '1998-9-1', text : 'schrool'},
				{date : '2009-6-21', text : 'work'}
			],
			basic : {
				sex : 'boy',
				works : 9
			}
		};
		function __initlize(){
			PjtHelper.bind(data, '_template', 'result');
		}
		on(window, 'load', __initlize);
	</script>

	<script type="text/template" id="_template">
		<div>name = @name</div>
		<div>age = @age</div>
		<div>4 years later = @(age + 4)</div>
		<div>sex = @basic.sex</div>
		<div>works = @basic.works</div>
		@{
			var r = 255, g = 0, b = 0;
		}
		<div style="color:rgb(@r, @g, @b)">color:rgb(@r, @g, @b)</div>
		<ul>
		@for(var i = 0; i < list.length; i++){
			<li>@list[i].text = @list[i].date</li>
		}
		</ul>
		<ul>
		@each list as value{
			<li>@value.text =  @value.date</li>
		}
		</ul>
		<ul>
		@foreach basic as key, value{
			<li>@key = @value</li>
		}
		</ul>
	</script>
</body>
</html>