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>To render a <em>non-repeating</em> template against an array, with content above or below the repeating items,<br />
14 
wrap the array - as <em>render([myArray])</em> - and include <em>{{for #data}}</em> for the repeating section</h3>
15 
 
16 
<div class="subhead">Top-level layout:</div>
17 
<pre>
18 
$( "#movieList" ).html(
19 
    // Pass second parameter <em>true</em> to choose noIteration even for arrays.
20 
    $("#movieTemplate").render(movies, true)
21 
);
22 
 
23 
Template:
24 
 
25 
   header
26 
   {{for}}
27 
      item
28 
   {{/for}}
29 
   footer
30 
</pre>
31 
 
32 
<div class="subhead">Nested layout:</div>
33 
<pre>
34 
{{include languages}}
35 
    header
36 
    {{for}}
37 
        item
38 
    {{/for}}
39 
    footer
40 
{{/for}}
41 
</pre>
42 
 
43 
<!--================ Demo ================-->
44 
 
45 
<script id="movieTemplate" type="text/x-jsrender">
46 
	<thead>
47 
		<tr><th colspan="2">{{:length}} movies available:</th></tr>
48 
		<tr><th>Title</th><th>Languages</th></tr>
49 
	</thead>
50 
	<tbody>
51 
		{{for}}
52 
			<tr>
53 
				<td>{{>title}}</td>
54 
				<td>
55 
					{{include languages}}
56 
						<div>
57 
							{{if #data}}
58 
								<strong>{{:length}}</strong> languages available:
59 
								{{for}}
60 
									<em>{{>name}}</em>
61 
								{{/for}}
62 
							{{else}}
63 
								Original version only
64 
							{{/if}}
65 
						</div>
66 
						<div>
67 
							{{if #data}}
68 
								Additional languages also in stock
69 
							{{/if}}
70 
						</div>
71 
					{{/include}}
72 
				</td>
73 
			</tr>
74 
		{{/for}}
75 
	</tbody>
76 
</script>
77 
 
78 
<table id="movieList"></table>
79 
 
80 
<script type="text/javascript">
81 
 
82 
	var movies = [
83 
		{
84 
			title: "Meet Joe Black"
85 
		},
86 
		{
87 
			title: "Eyes Wide Shut",
88 
			languages: [
89 
				{ name: "French" },
90 
				{ name: "Mandarin" },
91 
				{ name: "Spanish" }
92 
			]
93 
		},
94 
		{
95 
			title: "The Inheritance",
96 
			languages: [
97 
				{ name: "English" },
98 
				{ name: "Russian" }
99 
			]
100 
		}
101 
	];
102 
	$( "#movieList" ).html(
103 
		// Wrap movies array in an array
104 
		$( "#movieTemplate" ).render(movies, true)
105 
	);
106 
</script>
107 
 
108 
</body>
109 
</html>
110 
 
111