<!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. The-ith-Element

    Brief: the-ith-element,given a array A with n element , return the i-th element of A.  A(n,i) this p ...

  2. mysql颠覆实战笔记(四)--商品系统设计(一):商品主表设计

    版权声明:笔记整理者亡命小卒热爱自由,崇尚分享.但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的<web级mysql颠覆实战课程 >.如需转载请尊重老师劳动,保留沈逸 ...

  3. ROS ZYNQ移植

    1  准备工作 全部是按照官方操作的:http://wiki.ros.org/groovy/Installation/Source   apt-get install python-rosdep py ...

  4. JSON结构

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programming Langu ...

  5. 在 linux x86-64 模式下分析内存映射流程

    前言 在上一篇中我们分析了 linux 在 x86-32 模式下的虚拟内存映射流程,本章主要继续分析 linux 在 x86-64 模式下的虚拟内存映射流程. 讨论的平台是 x86-64, 也可以称为 ...

  6. Bootstrap Paginator 分页 demo.

    效果如下: 需要的引用以下内容 bootstrap2 http://cnbootstrap.com/ bootstrap-paginator v0.5 主页 http://bootstrappagin ...

  7. js 倒计时 倒计时60秒

    <input type="button" id="btn" value="免费获取验证码" onclick="settime ...

  8. 百度云盘demo

  9. Python计算斗牛游戏的概率

    Python计算斗牛游戏的概率 过年回家,都会约上亲朋好友聚聚会,会上经常会打麻将,斗地主,斗牛.在这些游戏中,斗牛是最受欢迎的,因为可以很多人一起玩,而且没有技术含量,都是看运气(专业术语是概率). ...

  10. Basic Vlan Concepts

    1.  Vlan Benefit ·To reduce CPU overhead on each device by reducing the number of devices that recei ...