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表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈. 什么是栈呢,我就不找它具体的定义了,直接举个例子,栈就相当于一个很窄的木桶 ...
随机推荐
- Tabbar视图切换，返回上一视图，添加item
前面有一篇博文iOS学习之Tab Bar的使用和视图切换 这是在AppDelegate里使用Tabbar,这样的程序打开就是TabbarView了,有时候我们需要给程序做一些帮助页面,或者登录页面,之 ...
- 火狐谷歌浏览器Json查看插件
1.搜: Firefox的JSON插件 参考: Chrome/FireFox浏览器下处理JSON的插件_Bruce_新浪博客 JSONView :: Firefox 附加组件 但是后来去发现没用: 打 ...
- 《linux文件权限管理大总结》RHEL6
在linux系统下文件的权限通常会以下面的格式显示出来: Chmod文件权限: 权限的管理chmod -a 所有的权限 -u 文件所有者的权限 -g 组权限 -o 其他用户的权限 可以使用运算符来设 ...
- U-Boot--配置过程分析
arm核:arm920t 2410 uboot版本:u-boot1.1.6 通过readme可以知道配置执行make smdk2410_config命令. 顶层Makefile : smdk24 ...
- php后台如何避免用户直接进入方法实例
这篇文章介绍了php后台如何避免用户直接进入方法实例,有需要的朋友可以参考一下 1)创建BaseController控制器继承Controller(后台的一切操作要继承BaseController): ...
- How to running Job from a Form
For Example we wanna run a Job with name "FAN_TableList_CSV". So you must create a button ...
- 使用微软分布式缓存服务Velocity(Windows Server AppFabric Caching Service)
概述 Velocity是微软推出的分布式缓存解决方案,为开发可扩展性,可用的,高性能的应用程提供支持,可以缓存各种类型的数据,如CLR对象. XML.二进制数据等,并且支持集群模式的缓存服务器.Vel ...
- python_day2_homework_1（简单购物商城）
'''简单购物商城(要求):1,商品展示,价格2,买,加入购物车3,付款,钱不够''' 1 #_*_ coding: utf-8 _*_ __author__ = 'A-rno' meu_list_1 ...
- eclipse插件 代码提示和着色
插件一:Eclipse HTML Editor,用于编辑一些页面文件,例如JSP,HTML,JS等 Eclipse HTML编辑器插件主要提供以下功能:- HTML/JSP/XML/CSS/DTD/J ...
- Nginx模块开发1_明白自定义模块的编译流程
自定义模块的编译流程 --add-module参数 configure使用--add-module参数指定添加模块目录. config脚本 由--add-module指定的目录保存为$ngx-addo ...