JsRender 学习总结

jsRender 三个最重要的概念：模板、容器和数据。最重要的是：view(视图) 是我们定义的模板，上下文是视图所用的对象。

一、基础。

{{:}} 和 {{>}}(或{{html:}})两者都可以输出内容，不过后者是经过html编码的。　

{{: pathOrExpr}}             (value) 值类型

{{> pathOrExpr}}             (HTML-encoded value) html编码后的值

{{* mycode}}                 (using code) 代码

二、逻辑判断和循环。

if-else

　　语法：{{if condition}} ... {else condition} ... {{else}}... {{/if}}

例子：

<script type="text/tmp" id="tmp4">

    <p>my name is: {{:name}}</p>

    <p>我是：

        {{if info.age >= 18}}

            成年人

        {{else}}

            未成年

        {{/if}}

    </p>

</script>

var html = $("#tmp4").render(data);

$("#list").html(html);

for

　语法： {{for}} ... {{/for}}

　　例子：

<script type="text/tmp" id="tmp5">

  {{for}}

    <li>id:{{:ID}} name:{{:Name}}</li>

  {{/for}}

</script>

var arr = [

    { ID: 1, Name: "tom" },

    { ID: 2, Name: "jack" },

    { ID: 3, Name: "lucy"}

];

var html = $("#tmp5").render(arr);

$("#list").html(html);

　嵌套for

　　语法：语法：{{for}}...{{for 当前上下文}} ... {{/for}} ... {{/for}}

　　例子：

<script type="text/tmp" id="tmp7">

{{for}}

    <li>

        name:{{:name}}

        <ul>

            {{for hobbies}}

              <li>{{:#getIndex() + 1}}:{{:#data}}</li>

            {{/for}}

        </ul>

    </li>

{{/for}}

</script>

arr = [

{ name: "tom", hobbies: ["篮球", "足球"] },

{ name: "jack", hobbies: ["篮球", "橄榄球"] },

{ name: "lucy", hobbies: ["游泳", "羽毛球"] }

];

var html = $("#tmp7").render(arr);

$("#list").html(html);

分离for

　　语法：{{for 上下文 tmpl="模板id" /}}

　　如果for的逻辑比较复杂，嵌套的for就会让我们的模板变得复杂，维护难度加大；我们可以将for分离，以上面的例子，可以将for放到一个新的模板，然后通过 tmpl属性指定。　　

　　例子：

<script type="text/tmp" id="tmp8">

{{for}}

    <li>

    name:{{:name}}

        <ul>

            {{for hobbies tmpl="#tmp9" /}}

        </ul>

    </li>

{{/for}}

</script>

<script type="text/tmp" id="tmp9">

    <li>{{:#getIndex() + 1}}:{{:#data}}</li>

</script>

var html = $("#tmp8").render(arr);

$("#list").html(html);

嵌套循环使用参数访问父级数据，直接看例子：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>嵌套循环使用参数访问父级数据</title>

</head>

<body>

<table border="1px">

    <thead>

    <tr>

        <th >序号</th>

        <th >姓名</th>

        <th>年龄</th>

        <th >家庭成员</th>

    </tr>

    </thead>

    <tbody id="list">

    </tbody>

</table>

<script src="../js/jquery-3.1.1.min.js"></script>

<script src="../js/Jsrender.js"></script>

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

    <tr>

        <td>{{:#index + 1}}</td>

        <td>{{:name}}</td>

        <td>{{:age}}</td>

        <td>

          {{!-- 使用for循环时，可以在后边添加参数，参数必须以~开头，多个参数用空格分隔 --}}

          {{!-- 通过参数，我们缓存了父级的数据，在子循环中通过访问参数，就可以间接访问父级数据 --}}

          {{for family ~parentIndex=#index ~parentName=name ~parnetAge=age}}

            <b>{{:~parentIndex + 1}}.{{:#index + 1}}</b>

            {{!-- #data相当于this --}}

            {{:~parentName}}的{{:#data}}{{:~parnetAge}}

          {{/for}}

        </td>

      </tr>

</script>

<script>

    var dataSrouce =

    [

        {

            name: "张三",

            age:3,

            family: ["爸爸",  "妈妈", "哥哥"]

        },

        {

            name: "李四",

            age:4,

            family: ["爷爷","奶奶","叔叔" ]

        }

    ];

   $("#list").append($("#testTmpl").render(dataSrouce));

</script>

</body>

</html>

三、扩展应用

　　　　上面的基本用法已经可以满足大部分需求了。以下几个扩展都是为了分离视图和逻辑的，试想一下，如果我们的视图里还需要大量的逻辑判断或计算，全都写在一起，那会非常麻烦和难以维护。视图最好就是简单的标签，而逻辑都写在js里。jsRender是在视图上进行扩展的。

　　组合模板： include 组合模板

　　语法：include tmpl="模板id"

　　例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>include 组合模板</title>

    <script src="../js/jquery-3.1.1.min.js"></script>

    <script src="../js/Jsrender.js"></script>

</head>

<body>

    <p>{{include tmpl=... /}} 标签用于组合模板(template composition) -----用于在一个模板中引入另一个模板，并用上下文的数据来渲染template。</p>

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

  <div>

    {{:name}} lives in {{include tmpl="#addressTemplate"/}}

  </div>

</script>

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

    <b>{{>address.city}}</b>

</script>

    <div id="peopleList"></div>

    <script>

        var people = [

            {

                "name": "Pete",

                "address": {

                    "city": "Seattle"

                }

            },

            {

                "name": "Heidi",

                "address": {

                    "city": "Sidney"

                }

            }

        ];

        var html = $("#peopleTemplate").render(people);

        $("#peopleList").html(html);

    </script>

    </body>

</html>

自定义标签：views.tags和 views.helpers

语法：

　　 views.tags

　　　　　　1.视图 {{"标签名称" 标签参数附加参数}}

　　　　　　2.逻辑 $.views.tags({"标签名称":function(参数){this.tagCtx.props.prefix附加参数}}) //prefix附加参数是你传的参数名称

views.helpers

　　　　　　1、视图{{~“标签名称”(附加参数)}}

　　　　　　2、逻辑$.views.helpers（{“标签名称”：function（参数）{//具体逻辑}}）

　　　因为两者基本都一样，但是views.helpers比较灵活

　　　　例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>两种自定义标签 views.tags和 views.helpers </title>

</head>

<body>

<p>不推荐使用 $.views.tags 这种自定义标签 建议使用$.views.helpers </p>

<div>

    <p>views.tags</p>

    <table>

        <thead>

        <tr>

            <th width="50%">名称</th>

            <th width="50%">单价</th>

        </tr>

        </thead>

        <tbody id="list">

        <!-- 定义JsRender模版 -->

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

      <tr>

        <td>{{:name}}</td>

        <td>

          {{!-- isShow为自定义标签，price是传入的参数，status是附加属性 --}}

          {{isShow price age=0}}

            {{:price}}

          {{else price age=1}}

            --

          {{/isShow}}

        </td>

      </tr>

    </script>

        </tbody>

    </table>

</div>

<br/><br/>

<br/><br/>

<div id="div2">

    <p>views.helpers</p>

    <table>

        <thead>

        <tr>

            <th width="50%">名称</th>

            <th width="50%">单价</th>

        </tr>

        </thead>

        <tbody id="list2">

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

           <tr>

        <td>{{:name}}</td>

        <td>

          {{!-- 利用原生的if做分支跳转，利用helper做逻辑处理 --}}

          {{if ~isShow123(price)}}

            {{:price}}

          {{else}}

            --

          {{/if}}

        </td>

      </tr>

            </script>

        </tbody>

    </table>

</div>

<body>

<script src="../js/jquery-3.1.1.min.js"></script>

<script src="../js/Jsrender.js"></script>

<script>

    //数据源

    var dataSrouce = [{

        name: "苹果",

        price: 108

    },{

        name: "鸭梨",

        price: 370

    },{

        name: "桃子",

        price: 99

    },{

        name: "菠萝",

        price: 371

    },{

        name: "橘子",

        price: 153

    }];

    //自定义标签 $.views.tags可以自定义标签，指定自定义标签的渲染规则。它可以给一段固定格式的html块起个名称，然后通过这个名称直接调用

    $.views.tags({

        "isShow": function(price){

            var temp=price+''.split('');

               //this.tagCtx.render(val)有点像指定参数的感觉。官方说是

            if(this.tagCtx.props.age === 0){

                //判断价格是否为水仙花数，如果是，则显示，否则不显示

                if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){

                    return  "<p><em style='color: red'>"+this.tagCtxs[0].render()+"</em></p>";

                }else{

                    return this.tagCtxs[1].render();

                }

            }else{

                return "";

            }

        }

    });

    $.views.helpers({

        "isShow123": function(price){

            var temp=price+''.split('');

            if(price==(Math.pow(parseInt(temp[0],10),3)+Math.pow(parseInt(temp[1],10),3)+Math.pow(parseInt(temp[2],10),3))){

                return true;

            }else{

                return false;

            }

        }

    });

    //views.tags渲染数据

    var html = $("#testTmpl").render(dataSrouce);

    $("#list").append(html);

    //vies.helpers渲染数据

    var html2 = $("#testTmpl2").render(dataSrouce);

     $("#list2").append(html2);

</script>

</body>

</html>

　转换器 converter

转换器可以对输出结果进行处理，例如大小写转换等。

语法：

　　　　1. 视图 {{"转化器名称":参数}}

　　　　2. js $.views.converters({"转换器名称":function(参数){...}})

<script type="text/tmp" id="tmp11">

    {{for}}

        <li>

            Upper Name: {{toUpper:#parent.data.name}}

        </li>

    {{/for}}

</script>

$.views.converters({

    "toUpper":function(name){

        if(name){

           return name.toUpperCase();

        }

    }

})

var html = $("#tmp11").render(arr);

$("#list").html(html)

　转载自：http://www.cnblogs.com/panmy/p/5927269.html

官网：www.jsviews.com

JsRender 学习总结的更多相关文章

knockoutJS学习笔记02：jsRender模板引擎
上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...
JsRender 前端渲染模板基础学习
JsRender前端渲染模板使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...
MVC学习笔记3 - JsRender
许多发展平台减少代码和简化维护,使用模板和 HTML5 和 JavaScript 也不例外. JsRender 是一个 JavaScript 库使您可以一次定义一个样板文件结构,并使用它来动态地生成 ...
云平台项目--学习经验--jsrender前端渲染模板
jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...
JsRender 前端渲染模板常用API学习
JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板获取使用script标签声 ...
前端渲染利器——JsRender入门
JsRender不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服.我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好用 ...
knockout学习笔记目录
关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...
knockoutJS学习笔记03：knockout简介
通常来说,前端的维护难度是比较大的,特别是脚本,虽然像jquery这样的库可以帮助我们减少很多代码,但在稍微复杂的情况下,还是会产生有很多代码.上一篇介绍了模板引擎jsRender,它可以帮我们快速生 ...
knockoutJS学习笔记06：ko数组与模板绑定
前面已经介绍了基本的绑定和模板相关知识,接下来就看ko里的数组和模板绑定,数组和模板绑定应该是实际项目中用得比较多的,ko提供了很好的支持. 一.observaleArray 前面的监控属性都是单个对 ...

随机推荐

Linux性能测试分析命令_iostat
iostat用于输出CPU和磁盘I/O相关的统计信息 iostat语法用法:iostat [ 选项 ] [ <时间间隔> [ <次数> ]] 常用选项说明: -c:只显示系统 ...
强制停止ORACLE数据库
操作环境 SuSE+Oracle11gR2 适用场景 shutdown immediate停止数据库失败操作命令 1.kill掉oracle实例相关进程 2.清除oracle占用的共享内存段 ipc ...
oracle RMAN使用
一步一步学RMAN 备份 RMAN连接上ORACLE,WINDOWS下在命令模式下 RMAN TARGET / 连接本地数据库用的是本地认证模式.RMAN连接数据库必须在dedicate模式下.因此在 ...
pandas 常用清洗数据（三）排序，去重
1.排序 DataFrame 按照Index排序 Series.order()进行排序,而DataFrame则用sort或者sort_index或者sort_values 2.去重, dt = dt. ...
SXSSExcelUtil
package com.numa.util; import org.apache.poi.hssf.usermodel.HSSFCell;import org.apache.poi.hssf.util ...
js中函数的 this、arguments 、caller，call()，apply()，bind()
在函数内部有两个特殊的对象,arguments 和 this,还有一个函数对象的属性caller. arguments对象 arguments是一个类似数组的对象,包含着传入函数的所有参数. func ...
MONGO的简单语法，新手实用
window上启动方式:(简单略) mongod --dbpath E:\study_lib\mongodb\db --port=27000 show dababases; (创建配置文件的启动方式) ...
SML + NL + HJ
Join是一种试图将两个表结合在一起的谓词,一次只能连接2个表,表连接也可以被称为表关联.在后面的叙述中,我们将会使用”row source”来代替”表”,因为使用row source更严谨一些,并且 ...
pyinstaller linux系统下打包python源文件
将python程序放在其他linux服务器中执行,通常linux服务器中默认安装python2.6,很多情况下需要升级为2.7 且要安装程序中需要的第三方模块,配置较为麻烦,所以通过在本地linux ...
elasticsearch 不同集群数据同步
采用快照方式 1.源集群采用NFS,注意权限 2.共享目录完成后,在所有ES服务器上挂载为同一目录 3.创建快照仓库 put _snapshot/my_backup{ "type" ...

JsRender 学习总结

JsRender 学习总结的更多相关文章

随机推荐

热门专题