Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6056 efrain 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
	<script src="http://code.jquery.com/jquery-3.5.1.js" type="text/javascript"></script>
5 
	<script src="../../jsrender.js" type="text/javascript"></script>
6 
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
7 
 
8 
	<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
9 
</head>
10 
<body>
11 
<a href="../demos.html">JsRender Demos</a><br />
12 
 
13 
<h3>Template composition. Using external templates for block tags, such as {{for}} and {{if}}.</h3>
14 
 
15 
<script id="movieTemplate" type="text/x-jsrender">
16 
	<tr>
17 
		{{include tmpl="#headerTemplate"/}}
18 
		<td>
19 
			{{for languages tmpl="#columnTemplate"/}}
20 
		</td>
21 
		<td>
22 
			{{for languages tmpl=tmpl/}}
23 
		</td>
24 
		<td>
25 
			{{for languages tmpl='#conditionalTemplate'/}}
26 
		</td>
27 
		{{include tmpl="#sectionWrapperTemplate"}}
28 
			{{>title}}
29 
		{{/include}}
30 
		<td>
31 
			{{for languages tmpl='#indexWrapperTemplate'}}
32 
				<b>{{>name}}</b>
33 
			{{/for}}
34 
		</td>
35 
	</tr>
36 
</script>
37 
 
38 
<script id="headerTemplate" type="text/x-jsrender">
39 
	<td>{{>title}}</td>
40 
</script>
41 
 
42 
<script id="sectionWrapperTemplate" type="text/x-jsrender">
43 
	<td>Section: <em>{{include tmpl=#content/}}</em></td>
44 
</script>
45 
 
46 
<script id="columnTemplate" type="text/x-jsrender">
47 
	<div>
48 
		<em>{{>name}}</em>
49 
	</div>
50 
</script>
51 
 
52 
<script id="rowTemplate" type="text/x-jsrender">
53 
	<span>
54 
		<b>{{>name}}</b>
55 
	</span>
56 
</script>
57 
 
58 
<script id="conditionalTemplate" type="text/x-jsrender">
59 
	{{if name.charAt(0)==='E' tmpl='#rowTemplate'}}
60 
	{{else tmpl='#columnTemplate'}}
61 
	{{/if}}
62 
</script>
63 
 
64 
<script id="indexWrapperTemplate" type="text/x-jsrender">
65 
	<div>
66 
		{{:#index}}:
67 
		{{include tmpl=#content/}}
68 
	</div>
69 
</script>
70 
 
71 
<table>
72 
	<thead><tr><th>Synopsis</th><th>Fixed Template</th><th>Template specified in data</th><th>Conditional Template</th><th>Wrapper Template</th><th>Repeating Wrapper Template</th></tr></thead>
73 
	<tbody id="movieList"></tbody>
74 
</table>
75 
 
76 
<script type="text/javascript">
77 
 
78 
	var movies = [
79 
		{
80 
			title: "Meet Joe Black",
81 
			languages: [
82 
				{ name: "English" },
83 
				{ name: "French" }
84 
			],
85 
			tmpl: "#columnTemplate"
86 
		},
87 
		{
88 
			title: "Eyes Wide Shut",
89 
			languages: [
90 
				{ name: "French" },
91 
				{ name: "Esperanto" },
92 
				{ name: "Spanish" }
93 
			],
94 
			tmpl: "#rowTemplate"
95 
		},
96 
		{
97 
			title: "The Inheritance",
98 
			languages: [
99 
				{ name: "English" },
100 
				{ name: "German" }
101 
			],
102 
			tmpl: "#columnTemplate"
103 
		}
104 
	];
105 
 
106 
	$( "#movieList" ).html(
107 
		$( "#movieTemplate" ).render( movies )
108 
	);
109 
 
110 
</script>
111 
 
112 
</body>
113 
</html>
114 
 
115