| 16825 |
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 |
<style type="text/css">
|
|
|
10 |
.role { font-weight: bold; font-style: italic; background-color: Yellow; }
|
|
|
11 |
.synopsis { background-color: white; padding: 15px; }
|
|
|
12 |
.director { font-weight: bold; font-style: italic; color: red; }
|
|
|
13 |
</style>
|
|
|
14 |
</head>
|
|
|
15 |
<body>
|
|
|
16 |
<a href="../demos.html">JsRender Demos</a><br />
|
|
|
17 |
|
|
|
18 |
<h3>Using {{: }} or {{> }} to render data values with optional conversion or encoding</h3>
|
|
|
19 |
|
|
|
20 |
<ul>
|
|
|
21 |
<li><em>{{:value}}</em> — does not convert. Used to render values that include html markup.</li>
|
|
|
22 |
<li><em>{{loc:value lang="..."}}</em> — Uses custom converter.</li>
|
|
|
23 |
<li><em>{{html:value}}</em> — Converts using built-in HTML encoder. (Better security within element content, but slight perf cost).</li>
|
|
|
24 |
<li><em>{{>value}}</em> — Alternative syntax for built-in HTML encoder.</li>
|
|
|
25 |
<li><em>{{attr:availability}}</em> — Converts using built-in attribute encoder. (Better security within attributes).</li>
|
|
|
26 |
<li><em>{{url:value lang="..."}}</em> — Converts using built-in URL encoder.</li>
|
|
|
27 |
</ul><br />
|
|
|
28 |
<div class="box label">
|
|
|
29 |
<b>Note:</b> A common use for converters is to protect against injection attacks from untrusted data.
|
|
|
30 |
<br />It is generally best to use <b>{{> }}</b> when rendering data within element content, if the data is not intended to provide markup for insertion in the DOM.
|
|
|
31 |
<br />In the context of HTML attributes, use <b>{{attr: }}</b>.</div>
|
|
|
32 |
|
|
|
33 |
<script id="movieTemplate" type="text/x-jsrender">
|
|
|
34 |
<tr title="{{attr:availability}}">
|
|
|
35 |
<td>{{loc:title lang='EN'}}</td>
|
|
|
36 |
<td>{{loc:title lang='FR'}}</td>
|
|
|
37 |
<td class="synopsis">{{:synopsis}}</td>
|
|
|
38 |
<td class="synopsis">{{>synopsis}}</td>
|
|
|
39 |
</tr>
|
|
|
40 |
</script>
|
|
|
41 |
|
|
|
42 |
<table>
|
|
|
43 |
<thead><tr><th>Title (loc:English)</th><th>Title (loc:French)</th><th>No Convert</th><th>HTML Encode</th></tr></thead>
|
|
|
44 |
<tbody id="movieList"></tbody>
|
|
|
45 |
</table>
|
|
|
46 |
|
|
|
47 |
<script type="text/javascript">
|
|
|
48 |
|
|
|
49 |
var movies = [
|
|
|
50 |
{
|
|
|
51 |
availability: "Available in 'X&Y' Cinemas",
|
|
|
52 |
title: "Meet Joe Black",
|
|
|
53 |
synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
|
|
|
54 |
},
|
|
|
55 |
{
|
|
|
56 |
availability: "Available at < 20kms from London",
|
|
|
57 |
title: "Eyes Wide Shut",
|
|
|
58 |
synopsis: "Director <span class='director'>Stanley Kubrick's</span> final film: <br/><br/><img src='http://cdn-4.nflximg.com/US/boxshots/large/5670434.jpg'/>"
|
|
|
59 |
}
|
|
|
60 |
];
|
|
|
61 |
|
|
|
62 |
$.views.converters({
|
|
|
63 |
loc: function (value) {
|
|
|
64 |
var result = "";
|
|
|
65 |
|
|
|
66 |
switch(this.tagCtx.props.lang) {
|
|
|
67 |
case "EN":
|
|
|
68 |
result = value;
|
|
|
69 |
break;
|
|
|
70 |
|
|
|
71 |
case "FR":
|
|
|
72 |
switch (value) {
|
|
|
73 |
case "Meet Joe Black":
|
|
|
74 |
result = "Rencontrez Joe Black";
|
|
|
75 |
break;
|
|
|
76 |
|
|
|
77 |
case "Eyes Wide Shut":
|
|
|
78 |
result = "Les Yeux Grand Fermés";
|
|
|
79 |
break;
|
|
|
80 |
}
|
|
|
81 |
break;
|
|
|
82 |
}
|
|
|
83 |
return result;
|
|
|
84 |
}
|
|
|
85 |
});
|
|
|
86 |
$( "#movieList" ).html(
|
|
|
87 |
$( "#movieTemplate" ).render( movies )
|
|
|
88 |
);
|
|
|
89 |
|
|
|
90 |
</script>
|
|
|
91 |
|
|
|
92 |
</body>
|
|
|
93 |
</html>
|