jquery-datalink/beta2/2hierarchical.html at master · ampfm/jquery-datalink · 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
95
96
97
98
99
100
101
102
103
104
<!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>
	<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
	<script src="jquery.datalink2.js" type="text/javascript"></script>
	<script src="jquery.tmpl2.js" type="text/javascript"></script>
</head>
<body>
	<button onclick="showData()">show data</button>

	<button onclick="setName()">set name</button>
	<hr /><br />

	<table id="myDeclarative" data-jq-tmpl="contactListTmpl">

		<tbody><tr><td>

			<h3 data-jq-linkfrom="title"></h3>
			<input data-jq-linkto="title" data-jq-linkfrom="title" />

		</td></tr></tbody>
		<tbody data-jq-path="people" data-jq-tmpl="personTmpl">

			<tr data-jq-path="">
				<td>
					Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
				</td>
				<td>
					<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
					<input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
				</td>
			</tr>

			<tr data-jq-path="">
				<td>
					Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
				</td>
				<td>
					<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
					<input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
				</td>
			</tr>

			<tr data-jq-path="">
				<td>
					Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
				</td>
				<td>
					<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
					<input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
				</td>
			</tr>

		</tbody>

	</table>

	<script type="text/javascript">
		var myContactList = {
				title: "My Friends",
				people: [
					{
						firstName: "Jo",
						lastName: "Proctor"
					},
					person2 = {
						firstName: "Maria",
						lastName: "Garcia"
					},
					person3 = {
						firstName: "Josh",
						lastName: "Evetsky"
					}
				]};

		$.dataLink( myContactList, "#myDeclarative" ).pushValues();

		$.dataLink( "#myDeclarative", myContactList );

		function setName() {
			$.setField( myContactList.people[0], "lastName", "Greenford" );
		}

	</script>

	<!--Console-->

	<script id="showData" type="text/x-jquery-tmpl">
		<div>${firstName} ${lastName}</div>
	</script>

	<br /><hr />
	<b>Console</b>

	<div id="console"></div>
<script type="text/javascript">
		function showData() {
			$( "#console" ).append("-----------------");
			$( "#showData" ).tmpl( myContactList.people ).appendTo( "#console" );
		}
	</script>

</body>
</html>