posts - 710,  comments - 81,  views - 260万
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
JsRender 学习总结

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

 一、基础。

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

{{: pathOrExpr}}             (value) 值类型  
{{> pathOrExpr}}             (HTML-encoded value) html编码后的值  
{{* mycode}}                 (using code) 代码

二、逻辑判断和循环。

       if-else

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

      例子： 

?
1
2
3
4
5
6
7
8
9
10
11
12
<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}}

 　　例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
<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}}

　　例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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属性指定。　　

　　例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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);

　　

嵌套循环使用参数访问父级数据，直接看例子：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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"

　　例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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比较灵活

　　　　例子：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!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(参数){...}})

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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

posted on   itprobie-菜鸟程序员  阅读(539)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
历史上的今天：
2013-07-10 ORA-04031:
Powered by:
博客园
Copyright © 2025 itprobie-菜鸟程序员
Powered by .NET 9.0 on Kubernetes
点击右上角即可分享
微信分享提示