首页 > 代码库 > JsRender (js模板引擎)

JsRender (js模板引擎)

2024-09-17 19:13:54   221人阅读

　　最近学习了一下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="../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="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://borismoore.github.io/jsrender/demos/demos.html，最好是参考官网：www.jsviews.com

JsRender (js模板引擎)


联系
我们