首页 > 代码库 > JsRender 学习总结

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="http://www.mamicode.com/js/jquery-3.1.1.min.js"></script><script src="http://www.mamicode.com/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="http://www.mamicode.com/js/jquery-3.1.1.min.js"></script>    <script src="http://www.mamicode.com/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="http://www.mamicode.com/js/jquery-3.1.1.min.js"></script><script src="http://www.mamicode.com/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 学习总结