JsRender系列demo(3)-自定义容器

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script type="text/javascript" src="scripts/jquery.js"></script>

<script type="text/javascript" src="scripts/jquery-ui.js"></script>

<script type="text/javascript" src="scripts/jsrender.js"></script>

<link href="scripts/demos.css" rel="stylesheet" />

<link href="scripts/movielist.css" rel="stylesheet" />

<style type="text/css">

.role

{

font-weight: bold;

font-style: italic;

background-color: Yellow;

}



.synopsis

{

background-color: white;

padding: 15px;

}



.director

{

font-weight: bold;

font-style: italic;

color: red;

}

</style>

</head>

<body>

<!--下面的内容只是说明作用-->

<h3>用{{: }} or {{> }}用可选和编码展示数据</h3>

<ul>

<li><em>{{:value}}</em> —用于渲染值,包括HTML标记。</li>

<li><em>{{loc:value lang="..."}}</em> —使用自定义转换器。</li>

<li><em>{{html:value}}</em> —将使用内置的HTML编码器。(更好的安全性,在元素的内容,但轻微的性能成本)。</li>

<li><em>{{>value}}</em> — 内置的HTML编码器替代语法.</li>

<li><em>{{attr:availability}}</em> —使用内置的属性转换编码器。(更好的安全属性)。</li>

<li><em>{{url:value lang="..."}}</em> — 使用内置的URL编码转换。</li>

</ul>

<br />

<div class="box label">

<b>Note:</b> A common use for converters is to protect against injection attacks from untrusted data.

<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.

<br />

In the context of HTML attributes, use <b>{{attr: }}</b>.

</div>

<!--上面的内容只是说明作用-->

<!--对比了{{:name}}和{{>name}}的区别-->

<script type="text/x-jsrender" id="movieTemplate">

<tr title="{{attr:availability}}">

<td>{{loc:title lang='EN'}}</td>

<td>{{loc:title lang='FR'}}</td>

<td class="synopsis">{{:synopsis}}</td>

<td class="synopsis">{{>synopsis}}</td>

</tr>

</script>

<!--表格开始-->

<table>

<thead>

<tr>

<th>Title (loc:English)</th>

<th>Title (loc:French)</th>

<th>No Convert</th>

<th>HTML Encode</th>

</tr>

</thead>

<tbody id="movieList"></tbody>

</table>

<!--表格结束-->



<script type="text/javascript">

//Json数据

var movies = [

{

availability: "Available in 'X&Y' Cinemas",

title: "Meet Joe Black",

synopsis: "The <span class='role'>死神</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>)..."

},

{

availability: "Available at < 20kms from London",

title: "Eyes Wide Shut",

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'/>"

}

];

//自定义模板

$.views.converters({

loc: function (value) {

var result = "";

switch (this.tagCtx.props.lang) {

case "EN": result = value; break;

case "FR": switch (value) {

case "Meet Joe Black":

result = "Rencontrez Joe Black";

break;

case "Eyes Wide Shut":

result = "Les Yeux Grand Fermes";

break;

}

break;

}

return result;

}

});

$("#movieList").html($("#movieTemplate").render(movies));

</script>

</body>

</html>

  

你可能感兴趣的:(jsrender)