<!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" />

</head>

<body>

    <script id="movieTemplate" type="text/x-jsrender">

        <td>{{>~format(title, "upper")}}</td>//逗号，和“upper”之间一定要空一格

        <td>{{for  languages}}{{>~format(name, "lower")}}{{/for}}</td>

    </script>

    <table>

        <thead>

            <tr>

                <th>Title</th>

                <th>Languages</th>

            </tr>

        </thead>

        <tbody id="movieList"></tbody>

    </table>

    <script type="text/javascript">

        $.views.helpers({

            format: function (val, format) {

                var ret;

                switch (format) {

                    case "upper": return val.toUpperCase();

                    case "lower": return val.toLowerCase();

                }

            }

        });

        var movie = {

            title: "Eyes Wide Shut",

            languages: [

				{ name: "CHINA" },

				{ name: "FRNDH" },

				{ name: "HDGD" }

            ]

        };

        $("#movieList").html(

            $("#movieTemplate").render(movie)

        );

    </script>

</body>

</html>

　　

JsRender系列demo(9)自定义函数的更多相关文章

  1. JsRender系列demo(3)-自定义容器

    <!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. PHP函数之自定义函数

    像数学中的函数一样,y=f(x)是函数基本的表达形式,x可看做是参数,y可看做是返回值,即函数定义就是一个被命名的.独立的代码段,它执行特定的任务,并可能给调用它的程序返回一个值. 自定义函数 函数的 ...

  9. Python基础笔记系列九：变量、自定义函数以及局部变量和全局变量

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 变量在前面的系列中也许就可以发现,python中的变量和C中的变量有些许不 ...

随机推荐

  1. OpenGL1-6讲小结

    首先是第一讲,GL窗体的搭建,依葫芦画瓢,很多代码虽然解释了,最后看起来还是比较生涩.一开始按照上一篇的链接去敲的代码,结果最后while死循环了,我也不知道问题出哪儿,后来去找了个源码,还附带了更加 ...

  2. C#学习笔记（第1周作业）

    受队友诱惑,去听了李强的C#公选课,第二天就完成作业了. 作业要求: 1. 小学生加法程序: 2. 能自由设置难度: 3. 对结果进行统计. 第一次写C#程序,遇到不少困难,和队友讨论,百度谷歌一齐上 ...

  3. 抽象类(abstract)是否可以继承自实体类 ？

    可以. 但是这个实体类必须有无参构造函数(默认的构造函数). 如: public class A { //这个构造函数必须要有(在没有构造函数重载时可以省略,因为运行时会为A添加默认构造函数) pub ...

  4. 【风马一族_Android】 图能

    ---------------------------------- 第一次 名称:相片查看器 ---------------------------------- 通过3D.自动播放幻灯片.旋转.跳 ...

  5. 关于CSS中的PX值（像素）

    场景: 人物:前端实习生「阿树」与 切图工程师「玉凤」事件:设计师出设计稿,前端实现页面 玉凤:树,设计稿发给你啦,差那么点像素,就叼死你┏( ￣へ￣)=☞阿树:~(>_<)~毛问题噶啦~ ...

  6. 转学步园：jquery offset

    JQuery Offset实验与应用 我们有时候需要实现这样一种功能:点击一个按钮,然后在按钮的下方显示一个div.当按钮位于角落时,div的位置设定就需要计算,使div完全显示. 我打算使用offs ...

  7. SQLserver利用系统时间生成“2015-11-30 00:00:00.000”类型的时间

    select getdate() ---当前时间:2015-12-18 10:20:24.097 -------------------建立测试表 Create Table #Test ( ID IN ...

  8. ORACLE 11G 配置DG 报ORA-10458、ORA-01152、ORA-01110

    操作系统: Oracle Linux Server release 5.7 数据库版本: Oracle Database 11g Enterprise Edition Release 11.2.0.3 ...

  9. SVN四部曲之SVN简单使用教程入门

    1.        签出源代码到本机 在本机创建文件夹StartKit,右键点击Checkout,弹出如下图的窗体: 2.        2 在上图中URL of Repository:下的文本框中输 ...

  10. 关于Oracle表空间数据文件自增长的一些默认选项

    昨天,一个同事请教了一些关于Oracle表空间数据文件自增长的问题,解答过程中顺便整理起来,以后其他同事有同样的疑问时可以直接查阅. 实验内容: 创建MYTEST表空间,默认不开启自增长. 给MYTE ...