jquery-datalink/beta2/4tmplRender.html at master · Daggett/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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!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>
	<style type="text/css">
		table { border-collapse: collapse; }
		td { padding: 6px; }
		.r-o { border: 2px darkblue solid; }
		.row1 { border: 2px darkblue solid; border-bottom: 0px; }
		.row2 { border: 2px darkblue solid; border-top: 0px; }
	</style>
</head>
<body>
	<button onclick="showData()">show data</button>

	<button onclick="setLastName()">set last name</button>
	<button onclick="append()">append</button>
	<button onclick="deleteLast()">delete last row</button>
	<hr /><br />

	<h3>Editable</h3>
	<table><tbody id="peopleGrid"></tbody></table>
	<hr /><br />

	<h3>Read-only</h3>
	<table><tbody id="peopleGrid2"></tbody></table>

	<script id="editTmpl" type="text/x-jquery-tmpl">
		<tr class="row1">
			<td>
				<button class="btnDelete">X</button>
				Name: <span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
			</td>
		</tr>
		<tr class="row2">
			<td>
				<input data-jq-linkto="firstName" data-jq-linkfrom="firstName" />
				<input data-jq-linkto="lastName" data-jq-linkfrom="lastName" />
			</td>
		</tr>
	</script>

	<script id="readOnlyTmpl" type="text/x-jquery-tmpl">
		<tr>
			<td class="r-o">
				<span data-jq-linkfrom="firstName"></span> <span data-jq-linkfrom="lastName"></span>
			</td>
		</tr>
	</script>

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

		$( "#peopleGrid" ).html(
			$( "#editTmpl" ).tmplRender( people, { annotate: true })
		);
		$.dataLink( people, "#peopleGrid", "#editTmpl" ).pushValues();
		$.dataLink( "#peopleGrid", people );

		$( "#peopleGrid2" ).html(
			$( "#readOnlyTmpl" ).tmplRender( people, { annotate: true })
		);
		$.dataLink( people, "#peopleGrid2","#readOnlyTmpl" ).pushValues();
		$.dataLink( "#peopleGrid2", people );

		$( "#peopleGrid" )
			.delegate( ".btnDelete", "click", function() {
				var item = $.viewItem( this ),
					index = $.inArray( item.data, item.parent.data );
				$.changeArray( people, "splice", index, 1 );
			});

		function setLastName() {
			if ( people.length ) {
				$.setField( people[ people.length - 1 ], "lastName", "NewLastName" );
			}
		}

		function append() {
			$.changeArray( people, "push", {
				firstName: "NewFirst",
				lastName: "NewLast"
			});
		}

		function deleteLast() {
			$.changeArray( people, "pop" );
		}

	</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("-----------------");
			$( "#console" ).append( $( "#showData" ).tmplRender( people ));
		}
	</script>

</body>
</html>