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表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈. 什么是栈呢,我就不找它具体的定义了,直接举个例子,栈就相当于一个很窄的木桶 ...
随机推荐
- C++ Maps 映射
C++ Maps是一种关联式容器,包含“关键字/值”对 begin() 返回指向map头部的迭代器 clear() 删除所有元素 count() 返回指定元素出现的次数 empty() 如果map为空 ...
- OOA、OOD、OOP
复习 OOA.OOD.OOP OOA Object-Oriented Analysis:面向对象分析方法 是在一个系统的开发过程中进行了系统业务调查以后,按照面向对象的思想来分析问题.OOA与结构 ...
- 使用原生Sql查询实现按分类推送最新文章到首页
一般在网站的首页都会有网站最新文章的推送,而这些文章又属于不同的分类.如果某个分类的文章突然集中在一个时间段发布,那么就会造成首页上所有文章都是该分类的文章,其他的文章分类就变成不可见的了.所以,我希 ...
- 《postfix邮件服务下mailq、postmap、postqueue 、 postsuper等用法》
1.Mailq 功能说明:显示待寄邮件的清单. 语 法:mailq [-q] 补充说明:mailq可列出待寄邮件的清单,包括邮件ID,邮件大小,邮件保存时间,寄信人,收信人,以及邮件无法寄出的原因,提 ...
- Winform 导出Excel
private void 导出excelToolStripMenuItem_Click(object sender, EventArgs e) { ) { var saveFileDialog1 = ...
- WIN10主动推升级，有点意思
不论正与盗,皆推升级,是否一样可用?
- emmet(Zen coding)帮助文档
葵花宝典终可成,半途而废万事空. 官方地址:http://docs.emmet.io/cheat-sheet/ 我导出了pdf版,需要的同学可以下载: 链接:http://pan.baidu.com/ ...
- Z-BlogPHP 安装出现 (8) Undefined offset: 6 解决方法
有些cp面板的空间会在每个网页头部和页脚增加两个调用的文件,导致zblogPHP安装出错:(8) Undefined offset: 6 主要国外的主机中PHP配置文件两个选项auto_prepend ...
- http 错误编号大全（转）
状态行包含HTTP版本.状态代码.与状态代码对应的简短说明信息.在大多数情况下,除了Content-Type之外的所有应答头都是可选的.但Content-Type是必需的,它描述的是后面文档的MI ...
- python：执行一个命令行N次
经常希望可以执行一个命令行N次...windows下没有现成的工具(有?推荐给我!) 用python写一个... #!/usr/bin/evn python #coding: utf-8 " ...