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表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈. 什么是栈呢,我就不找它具体的定义了,直接举个例子,栈就相当于一个很窄的木桶 ...
随机推荐
- Codevs 1092 不高兴的津津
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 津津上初中了.妈妈认为津津应该更加用功学习,所以津津除了上学之外,还要参 ...
- 探索VS中C++多态实现原理
引言 最近把<深度探索c++对象模型>读了几遍,收获甚大.明白了很多以前知其然却不知其所以然的姿势.比如构造函数与拷贝构造函数什么时候被编译器合成,虚函数.实例函数.类函数的区别等等.在此 ...
- LLVM language 参考手册 翻译停止相关
再翻译LLVM language 参考手册的时候,个人感觉很多东西都不是很懂,因此打算学习完编译原理后再去继续研究翻译,多有不便望见谅
- 【Qt】Qt之自定义界面（QMessageBox）【转】
简述 通过前几节的自定义窗体的学习,我们可以很容易的写出一套属于自己风格的界面框架,通用于各种窗体,比如:QWidget.QDialog.QMainWindow. 大多数窗体的实现都是采用控件堆积来完 ...
- nginx总结
kill int 2333 进程号 停止程序 kiil quit 2322 优雅停止服务 kill -HUP 2333 优雅重启 从新读取配置文件 kill -HUP 'cat logs/n ...
- 例题6-4 Broken Keyboard UVa11988
题目分析: 起初这道题目没有做出来,原因是我一直想把整块区域一并插入,而不是逐个插入.今后做题应该注意这个问题,把问题分解去考虑,也许会少走许多弯路. 下边附上AC代码 #include <cs ...
- c++中的指针问题
c++和C语言一样,都有指针,指针通过变量的存储位置访问变量内容并进行修改,与引用不同的是,引用仅仅是给变量取一个别名,并不是一个对象,而指针则是一个对象. #include<iostream& ...
- Nginx+uWSGI+Django原理
Python的Web开发中,如果使用Django框架,那么较为成熟稳定的服务器架构一般是Nginx+uWSGI+Django.而为什么一定要三个结合在一起呢?直接使用Django的runserver来 ...
- C# 文件管理类 Directory
今天简单接触了一下C#的文件管理类,对类的大体功能做了简单的了解; 做项目用于判断文件是否存.在创建文件.删除文件较为常用:今天大体总结文件调取功能: public string GetFile() ...
- (转)Windows驱动编程基础教程
版权声明 本书是免费电子书. 作者保留一切权利.但在保证本书完整性(包括版权声明.前言.正文内容.后记.以及作者的信息),并不增删.改变其中任何文字内容的前提下,欢迎任何读者 以任何形式(包括 ...