jst/scopetest.html at master · lsong98sh/jst · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="3party/jquery-1.11.3.js"></script>
		<script src="3party/json2.js"></script>
		<script src="3party/jsplus.js"></script>
		<script src="jst.js"></script>

		<style>
			.tag{
				display: inline-block;
				padding: 5px;
				border: 1px solid #c0c0c0;
				width: 100px;
			}

		</style>
	</head>
	<body>
		<button onclick="test1()">test1</button>
		<button onclick="test2()">test2</button>
		<button onclick="test3()">test3</button>

		<div id="test">
			<div jst-skip test="{{aaa}}" jst-html="aaaa{{aaa}}"><span jst-html="aaa">not processed</span></div>
			{{aaa}}
			<input type="text" jst-bind="@count">
			<div value="{{i}}"
				jst-if="age > 7"
				jst-begin="console.log('begin')"
				jst-repeat="var i =0; i < count; ++ i"
				jst-filter="i % 2 == 0"
				jst-item-begin="console.log('item-begin')"
				jst-data-property="name";
				jst-call="console.log('call')"
				jst-item-end="console.log('item-end')"
				jst-end="console.log('end')">
				<div jst-html="aaa" jst-style="background-color:{{color}}"></div>
				<div jst-text="{{name}}"></div>
				<div>
					<div jst-purge="age > 7">{{""}}xxx{{age}}</div>
					<div jst-repeat="var j=0; j < count; ++j" value = "{{i}}-{{j}}" jst-text="a&quot;\\a{{name}}bb{{i}}-{{j}}"></div>
				</div>
			</div>
			<div class="tag" jst-repeat="var x=0;x < names.length; ++ x" jst-text="{{names[x].name}}"></div>
		</div>
		<div id="output"></div>
	</body>
	<script>
		var out  = document.getElementById("output");
		var tmpl = document.getElementById("test");
		var t = new jst(tmpl, out);
		var names = [];
		for(var i =0; i < 400; ++ i){
			names.push({name: "name" + i});
		}
		var data = {
				name : "Jhon smith",
				age : 10,
				gender : "male",
				color: "#e0e0e0",
				count: 10,
				face: {color: "yellow"},
				names: names
			};
		function test1(){
			t.render(data);
			t.watch(data);
			var p = out.querySelector("input");
			p.addEventListener("input", function(){
				var dom = event.target;
				var obj = jst.get_bind_obj(dom);
				if(obj){
					var key = jst.get_bind_key(dom);
					obj[key] = dom.value;
				}
			});
		}
		function test2(){
			data.age = 99;
			data.count = 0;
			names[1].name="yyy";
			t.render(data);
		}
		function test3(){
			data.age = 10;
			data.count = 5;
			names[1].name="zzz";
			t.render(data);
		}
	</script>
</html>