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系列demo(3)-自定义容器的更多相关文章
- JsRender系列demo(9)自定义函数
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(7)compline
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...
- JsRender系列demo(6)-无名
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...
- JsRender系列demo(5) for else
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(4)-if else
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(2)多模板-template
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(1)-insert-data
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Docker深入浅出系列 | Docker Compose多容器实战
目录 前期准备 Docker Compose是什么 为什么要用Docker Compose Docker Compose使用场景 Docker Compose安装 Compose Yaml文件结构 C ...
- 给jdk写注释系列之jdk1.6容器(10)-Stack&Vector源码解析
前面我们已经接触过几种数据结构了,有数组.链表.Hash表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈. 什么是栈呢,我就不找它具体的定义了,直接举个例子,栈就相当于一个很窄的木桶 ...
随机推荐
- 6.struts登陆页面的演示
1.创建一个web project "Struts_1" 添加struts的jar包 --在项目文件右键->myeclipse->add struts... ...
- 实验三——SDRAM
一.运行环境 开发板:jz2440 系统: ubuntu12.04 编译器:arm-linux-gcc 二.特殊寄存器 sdram的操作无需按照时序图来设置,只要设置好相关的13个寄存器,arm处理 ...
- Ubuntu14.04忘记root密码的解决方法
电脑20多天没用忘记密码了,下面是在网上找到的一个解决办法,其它的和这个也大概相同.因为其中有些缺漏,没能给我解决问题.通过分析最终问题还是解决了,现解决方案的关键点记录一下.希望能方便到其它人. 1 ...
- Android：自定义控件样式（Selector）
前言 在开发一个应用程序过程中不可避免的要去修改组件的样式,比如按钮.输入框等.现在就看下如何通过Seletor实现样式的自定义.先看下简单的效果对比
- 启动 mysql 失败 Warning:The /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql'
Warning:The /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' 这应该是某种情况下导致/usr/ ...
- Mvc中把list从View传入Controller
public class User { public string Name { get; set; } public bool IsChecked { get;set;} public int Ag ...
- grappelli美化django的admin页面
开始用admin时候,觉得它的页面实在...宁愿自己写modules,多费点时间 grappelli可以把admin变得非常美观,配置起来也很简单 第一步,先下载grappelli,搜索一下,wind ...
- SQL Server 本地语言版本
要一些实验是往往喜欢使用英文的Windows 以及SQL Server ,但有时需要使用中文的环境方便理解.中文的SQL Server 不能被安装在英文的Windows 系统上. 根据文档可得知以下兼 ...
- C#——中文转化成拼音
在KS系统中用到了中文转化成拼音的功能.通过查阅资料为下面是代码. /// <summary> /// MyConvert 的摘要说明 /// </summary> publi ...
- SQLserver中的xp_cmdshell
shell是用户与操作系统对话的一个接口,通过shell告诉操作系统让系统执行我们的指令 xp_cmdshell在sqlserver中默认是关闭的存在安全隐患. --打开xp_cmdshell ;;R ...