Proyectos de Subversion LeadersLinked - Backend

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
16825 efrain 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
	<script src="../../jsrender.js" type="text/javascript"></script>
5 
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
6 
 
7 
	<link href="../resources/movielist.css" rel="stylesheet" type="text/css" />
8 
</head>
9 
<body>
10 
<a href="../demos.html">JsRender Demos</a><br />
11 
 
12 
<h3>JsRender without jQuery</h3>
13 
 
14 
<pre>
15 
    (function($) {
16 
        ...
17 
        $.templates({
18 
            movieTemplate: document.getElementById( "movieTemplate" ).innerHTML,
19 
            ...
20 
        });
21 
 
22 
        document.getElementById( "movieList" ).innerHTML = $.render.movieTemplate( movies );
23 
 
24 
    })(this.jsrender);
25 
</pre>
26 
 
27 
<script id="movieTemplate" type="text/x-jsrender">
28 
	<tr>
29 
		<td>{{>title}}</td>
30 
		<td>{{sort languages tmpl="sortedTemplate"/}}</td>
31 
		<td>{{sort languages reverse=true}}
32 
				<div>
33 
					<b>{{>name}}</b>
34 
				</div>
35 
			{{/sort}}
36 
		</td>
37 
	</tr>
38 
</script>
39 
 
40 
<script id="sortedTemplate" type="text/x-jsrender">
41 
	<div>{{>name}}</div>
42 
</script>
43 
 
44 
<div id="movieList"></div>
45 
 
46 
<script type="text/javascript">
47 
 
48 
	(function($) {
49 
 
50 
		$.views.tags({
51 
 
52 
			sort: function( array ){
53 
				var ret = "";
54 
				if ( this.tagCtx.props.reverse ) {
55 
					// Render in reverse order
56 
					for ( var i = array.length; i; i-- ) {
57 
						ret += this.tagCtx.render( array[ i - 1 ] );
58 
					}
59 
				} else {
60 
					// Render in original order
61 
					ret += this.tagCtx.render( array );
62 
				}
63 
				return ret;
64 
			}
65 
 
66 
		});
67 
 
68 
		var movies = [
69 
			{
70 
				title: "Meet Joe Black",
71 
				languages: [
72 
					{ name: "English" },
73 
					{ name: "French" }
74 
				]
75 
			},
76 
			{
77 
				title: "Eyes Wide Shut",
78 
				languages: [
79 
					{ name: "French" },
80 
					{ name: "German" },
81 
					{ name: "Spanish" }
82 
				]
83 
			}
84 
		];
85 
 
86 
		$.templates({
87 
			movieTemplate: document.getElementById( "movieTemplate" ).innerHTML,
88 
			sortedTemplate: document.getElementById( "sortedTemplate" ).innerHTML
89 
		});
90 
 
91 
		document.getElementById( "movieList" ).innerHTML =
92 
			"<table><thead><tr><th>Title</th><th>Original order</th><th>Reverse order</th></tr></thead><tbody>" + $.render.movieTemplate( movies ) + "</tbody></table>";
93 
 
94 
	})(this.jsrender);
95 
 
96 
</script>
97 
 
98 
</body>
99 
</html>