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表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈. 什么是栈呢,我就不找它具体的定义了,直接举个例子,栈就相当于一个很窄的木桶 ...
随机推荐
- hibernate结合使用gson转换json中一点看法
转发请注明出处:http://www.cnblogs.com/shizhongtao/p/3680216.html 在前后台的交互中,经常需要把bean对象与xml或者json,这里就把自己以前遇到的 ...
- OpenGL第8,9讲小结
这两节,透明度和物体的3D运动,主要集中在第9讲,因为第9讲也用到了通过Alpha值来调整透明度的地方. 因为要模拟星星,所以要创建的四边形需要很多,例子中创建了50个正方形.因为每个星星的属性都差不 ...
- 非常难得的iPad版房地产售楼助手应用
一款高质量的iPad房地产售楼助手应用,采用的是类似facebook,新浪微博,腾讯微博,人人网的布局视图.功能有:客户管理系统(可添加,编辑等):2.房源管理系统;3.房贷计算器等,这个应用无论是布 ...
- ListBox复选框拓展
Toolkit的LongListMutiSelector的复选框功能,想必许多人都需要吧!然而系统本身控件ListBox虽然也有多选功能,可是外观上却缺乏复选框,选择效果只是颜色变化.于是在上一个项目 ...
- MySQL 密码增强插件
200 ? "200px" : this.width)!important;} --> 介绍 以前没有太注意MySQL密码安全策略的配置方法,只是人为了将密码设为复杂密码,但 ...
- winform INI文件操作辅助类
using System;using System.Runtime.InteropServices;using System.Text; namespace connectCMCC.Utils{ // ...
- 如何通过jquery隐藏和显示元素
以下几种方式可以隐藏一个元素:1,CSS display的值是none.2,type="hidden"的表单元素.3,宽度和高度都显式设置为0.4,一个祖先元素是隐藏的,该元素是不 ...
- windows下apache配置https
1.下载带有openSSL的apache安装包,我下载的为apache_2.2.11-win32-x86-openssl-0.9.8i.msi,安装后确认一下bin路径下的openssl.exe,ss ...
- php对数组排序代码
php对数组排序,介绍了和php,有关的知识.技巧.经验,和一些php源码等. 对数组排序 usort() 函数使用用户自定义的函数对数组排序. */ function cmp($a, $b) //用 ...
- pandas库学习笔记（一）Series入门学习
Pandas基本介绍: pandas is an open source, BSD-licensed (permissive free software licenses) library provi ...