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 context: Passing in additional helpers to a render() call</h3>
14 
 
15 
<div class="subhead">Passing in contextual variables or helper functions, using the helpersOrContext parameter of <em>...render( data, helpersOrContext );</em></div>
16 
<pre>
17 
$( selector ).render( data, {
18 
    reverseSort: reverse,
19 
    format: myFormatFunction,
20 
    buttonCaption: function(val) {
21 
        ...
22 
    }
23 
})
24 
</pre>
25 
 
26 
<div class="subhead">Use <em>~name</em> to access context variables or helpers by name - whether passed in with options,</div>
27 
<div class="subhead">registered globally as helpers, or registered as helpers for a specific template.</div>
28 
 
29 
<pre>
30 
&lt;th>&lt;button>{{>~buttonCaption('sort')}}&lt;/button>&lt;/th>
31 
...
32 
&lt;td>{{>~format(title)}}&lt;/td>
33 
...
34 
&lt;td>{{sort languages reverse=~reverseSort}}...{{/sort}}&lt;/td>
35 
</pre>
36 
 
37 
<!--================ Demo ================-->
38 
 
39 
<script id="movieTemplate" type="text/x-jsrender">
40 
	<thead>
41 
		<tr>
42 
			<th>Title <button id="formatBtn">{{>~buttonCaption('case')}}</button></th>
43 
			<th><button id="sortBtn">{{>~buttonCaption('sort')}}</button></th>
44 
		</tr>
45 
	</thead>
46 
	<tbody>
47 
		{{for #data}}
48 
		<tr>
49 
			<td>{{>~format(title)}}</td>
50 
			<td>
51 
				{{sort languages reverse=~reverseSort}}
52 
					<div>
53 
						<b>{{>name}}</b>
54 
					</div>
55 
				{{/sort}}
56 
			</td>
57 
		</tr>
58 
		{{/for}}
59 
	</tbody>
60 
</script>
61 
 
62 
<table id="movieList"></table>
63 
<br />
64 
 
65 
<script type="text/javascript">
66 
 
67 
	$.views.tags({
68 
 
69 
		// Tag to reverse-sort an array
70 
		sort: function( array ){
71 
			var ret = "";
72 
			if ( this.tagCtx.props.reverse ) {
73 
				// Render in reverse order
74 
				for ( var i = array.length; i; i-- ) {
75 
					ret += this.tagCtx.render( array[ i - 1 ] );
76 
				}
77 
			} else {
78 
				// Render in original order
79 
				ret += this.tagCtx.render( array );
80 
			}
81 
			return ret;
82 
		}
83 
 
84 
	});
85 
 
86 
	var reverse = false,
87 
		upperCase = false,
88 
		movies = [
89 
			{
90 
				title: "Meet Joe Black",
91 
				languages: [
92 
					{ name: "English" },
93 
					{ name: "French" }
94 
				]
95 
			},
96 
			{
97 
				title: "Eyes Wide Shut",
98 
				languages: [
99 
					{ name: "French" },
100 
					{ name: "German" },
101 
					{ name: "Spanish" }
102 
				]
103 
			}
104 
		];
105 
 
106 
	function myFormatFunction(value) {
107 
		return upperCase ? value.toUpperCase() : value.toLowerCase();
108 
	}
109 
 
110 
	$("#movieList")
111 
		.on("click", "#sortBtn", function(){
112 
			reverse = !reverse;
113 
			renderList();
114 
		})
115 
		.on("click", "#formatBtn", function(){
116 
			upperCase = !upperCase;
117 
			renderList();
118 
		});
119 
 
120 
	function renderList() {
121 
		$( "#movieList" ).html(
122 
			$( "#movieTemplate" ).render( [movies], {
123 
				reverseSort: reverse,
124 
				format: myFormatFunction,
125 
				buttonCaption: function(val) {
126 
					if (val === 'sort') {
127 
						return reverse ? "Sort increasing" : "Sort decreasing";
128 
					}
129 
					return upperCase ? "to lower" : "to upper";
130 
				}
131 
			})
132 
		);
133 
	}
134 
	renderList();
135 
</script>
136 
 
137 
</body>
138 
</html>