<!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)-自定义容器的更多相关文章

  1. JsRender系列demo(9)自定义函数

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. JsRender系列demo(7)compline

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  3. JsRender系列demo(6)-无名

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  4. JsRender系列demo(5) for else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. JsRender系列demo(4)-if else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. JsRender系列demo(2)多模板-template

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. JsRender系列demo(1)-insert-data

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. Docker深入浅出系列 | Docker Compose多容器实战

    目录 前期准备 Docker Compose是什么 为什么要用Docker Compose Docker Compose使用场景 Docker Compose安装 Compose Yaml文件结构 C ...

  9. 给jdk写注释系列之jdk1.6容器(10)-Stack&Vector源码解析

    前面我们已经接触过几种数据结构了,有数组.链表.Hash表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈.      什么是栈呢,我就不找它具体的定义了,直接举个例子,栈就相当于一个很窄的木桶 ...

随机推荐

  1. log4j自动生成日志文件配置

    生成文件到默认位置: #生成日志文件 #log4j.appender.systemFile=org.apache.log4j.RollingFileAppender #按天生成 log4j.appen ...

  2. AOJ 0558 Cheese

    Cheese Time Limit : 8 sec, Memory Limit : 65536 KB チーズ (Cheese) 問題 今年も JOI 町のチーズ工場がチーズの生産を始め,ねずみが巣から ...

  3. 隐马尔科夫模型及Viterbi算法的应用

    作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree/p/4335810.html 一个例子: 韦小宝使用骰子进行游戏,他有两种骰子一种正常的骰子,还有一 ...

  4. WP开发笔记——WP7 SDK使用技巧

    俗话说的好,工欲善其事,必先利其器. 入门WP开发之前,免不了要先接触开发环境和开发工具.使用WP7 SDK进行开发,我们需要掌握SDK的一些实用技巧,以便我们的开发. 一.开启/关闭电脑键盘输入 W ...

  5. 匹配一级分类和二级分类 名字和url 里面有玄机

    1:要匹配的html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  6. centos下安装图像化界面

    前面我们安装的centos系统多为没有图像化界面的命令行界面,为了安装oracle等工具,我们先为我们的centos安装图像化界面 使用命令为 yum groupinstall "Deskt ...

  7. Berkeley DB

    最近用BDB写点东西,写了挺多个测试工程.列下表,也理清楚最近的思路 1.测试BDB程序,包括打开增加记录,查询记录,获取所有记录.将数据转存mysql 程序的不足,增加记录仅仅只有key和value ...

  8. .NET SDK和下载

    http://blogs.msdn.com/b/dotnet/p/dotnet_sdks.aspx .NET SDK和下载 您可以通过下载.NET框架针对包和软件开发工具包,并使用它们与Visual ...

  9. [C/C++] 各种C/C++编译器对UTF-8源码文件的兼容性测试（VC、GCC、BCB）

    在不同平台上开发C/C++程序时,为了避免源码文件乱码,得采用UTF-8编码来存储源码文件.但是很多编译器对UTF-8源码文件兼容性不佳,于是我做了一些测试,分析了最佳保存方案. 一.测试程序 为了测 ...

  10. 【转载】MySQL 5.6主从Slave_IO_Running:Connecting/error connecting to master *- retry

    原文地址:MySQL 5.6主从Slave_IO_Running:Connecting/error connecting to master *- retry 作者:忆雨林枫 刚配置的MySQL主从, ...