jsRender模板引擎

上一篇最后提到了模板,并尝试自己编写一个最简单版本;有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢。这里介绍另外一个模板引擎:jsRender。个人觉得这些东西学习起来还是很简单的,挑一个看看就行,实际要用到了哪个,官网看看demo也就会用了。之所以选择jsRender,因为它具有以下特点:

  • 简单直观
  • 功能强大
  • 可扩展的
  • 快如闪电

  当然,谁都会自己给自己的产品下这样定义。不过我用完后,确实发现它:简单直观、功能强大、扩展性强;至于快如闪电...,有兴趣的朋友可以测试看看有多快!接下来就让我们学习jsRender的运用,这里用的是1.0版本。

一、基础

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

  先来看一下模板的基本标签:{{:}} 和 {{>}}(或{{html:}})。两者都可以输出内容,不过后者是经过html编码的。jsRender有几种方式可以渲染数据:

  假设模板如下:

1
2
3
4
<script type="text/tmp" id="tmp1">
    <p>my name is: {{:name}}</p>
    <p>i am: {{:info.age}} years old</p>
</script>

  数据如下:  

1
2
3
4
var data = {
    name : "tom",
    info : {age : 19}
}

  1.无编译前渲染。直接指定模板。例子:

    var html = $("#tmp1").render(data);
        console.log(html);

  2.编译后渲染。指定模板或字符串。

    2.1 指定模板。效果同1。例子:

      var template = $.templates("#tmp1");
      var html = template.render(data);
      console.log(html);

    2.2 指定模板名称

      2.2.1 传递字符串

        var template = $.templates("tmp1","<b>{{:name}}</b>");
            var html = $.render.tmp1(data);
            console.log(html);

      2.2.2 传递多个模板名称

        var template = $.templates({
            "tmp1":$("#tmp1").html(),
            "tmp2":$("#tmp2").html()
           });
          var html = $.render.tmp1(data);    
          console.log(html);

二、逻辑判断和循环

  2.1 if-else

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

  注意这里是 if-else-else,而不是 if-else if-else。例子:  

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);

  2.2 for

  语法:{{for}} ... {{/for}}

  2.2.1 简单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);   

  2.2.2 嵌套for。

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

  被嵌套的for 可以指定要遍历的属性的名称。#getIndex() 和 #data 会在下面提到。例子:  

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);

  2.2.3 分离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);

三、#data、#index、#parent

  开始提到,我们定义的模板就是视图,用到的对象就是上下文。

  #data 当前的上下文,有时候它是很有用的,例如我们返回的是最简单的数组[1,2,3,4],这时没法通过{{:属性}} 的形式去获得,通过{{#data}}即可。另外,可以指定上下文,例如上面的 hobbies,内嵌的for的上下文 #data 就是hobbies,而外部的 #data 是整个arr。

  #index 当前下标。应该用 #getIndex() 去获得。

  #parent 当前上下文所在的视图。parent 属性可以一直往上查找视图,视图的data属性就是当前上下文。例如如果我们要在内嵌的for获得外部的name属性,就可以通过 #parent.parent.data.name 获得。

四、扩展应用

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

4.1 自定义标签 Tag

  我们可以把标签里的逻辑移到自定义标签里。

  语法:1.视图 {{"标签名称" 标签参数 附加参数}}
           2.逻辑 $.views.tags({"标签名称":function(参数){this.tagCtx.props.prefix附加参数}}) 

  例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/tmp" id="tmp10">
    {{for}}
        <li>
            name:{{:name}}                           
            hobbies: {{format hobbies prefix="@" /}}
        </li>
    {{/for}}        
</script>
$.views.tags({
    "format":function(hobbies){
        if(!hobbies || hobbies.length <= 0){
            return "无";
        }
        var result = "";
        for(var i = 0,length = hobbies.length;i < length; i++){
            result += "," this.tagCtx.props.prefix + hobbies[i];
        }
        result = result.substring(1);
        return result;
    }
})
var html = $("#tmp10").render(arr);
$("#list").html(html);

4.2 转换器 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)

4.3 辅助函数 Helper

  扩展函数可以对结果进行处理,逻辑判断等等。

  语法 1. 视图 {{~辅助函数名称(参数)}}
          2. js $.views.helpers({"辅助函数名称":function(参数){}})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/tmp" id="tmp12">   
    {{for}}
        <li>
            name: {{:name}}
            hobbies: {{:~concat(hobbies)}}
        </li>
    {{/for}}  
</script>
$.views.helpers({
    "concat":function(hobbies){           
        if(!hobbies || hobbies.length <= 0){
            return "";
        }
        var result = "";
        for(var i = 0,length = hobbies.length;i < length;i++){
            result += "&&" + hobbies[i];
        }
        return result.substring(2);
    }
})
var html = $("#tmp12").render(arr);
$("#list").html(html);

五、总结

  jsRender还是比较新的,使用起来也比较方便。不过我们看到我们的数据和页面之间是一个单向的过程,而且是一次性的单向;也就是当我们的数据改变时,视图不能自动更新,而界面的数据改变时,实际数据也不能自动改变。设想一下,如果数据和视图是双向的,其中一个改变,都可以自动更新另外一个,那不就最好了,我们只需要操作数据,不需要操作dom了。这就是mvvm的机制,前端的mvvm框架有很多:knockout、angular等。下一篇将开始介绍knockout。

 
分类: knockout
标签: knockout

jsRender模板引擎的更多相关文章

  1. knockoutJS学习笔记02:jsRender模板引擎

    上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...

  2. JsRender (js模板引擎)

    最近学习了一下Jsrender模板渲染工具,非常不错,功能比较强大,官网说他是“简单直观 功能强大 可扩展的 快如闪电”确实如此.总结一下!! jsRender 三个最重要的概念:模板.容器和数据. ...

  3. 如何选择Javascript模板引擎(javascript template engine)?

    译者 jjfat 日期:2012-9-17  来源: GBin1.com 随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下: ...

  4. javascript模板引擎Mustache

    Mustache(英文本意:触须,胡须)是基于JavaScript实现的模版引擎,类似于JQuery Template,但是这个模版更加的轻量级,语法更加的简单易用,很容易上手. 下载:https:/ ...

  5. 高级 JsRender 模板功能

    转自:http://msdn.microsoft.com/zh-cn/magazine/hh975379.aspx 尽管模板很强大,但有时模板引擎提供的现成标准功能无法满足您的需求. 您可能要转换数据 ...

  6. Web模板引擎—Mustache

    Web模板引擎——Mustache 2012年9月12日 BY BELL·12 COMMENTS Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 ...

  7. 10 个强大的JavaScript / jQuery 模板引擎推荐

    模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...

  8. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. Handlebars 模板引擎之前后端用法

    前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...

随机推荐

  1. Google jsAPI托管你的js库

    来看一段JS: <script type="text/javascript" src="http://www.google.com/jsapi">& ...

  2. Win32 Windows规划 三

    一.NMAKE 和 Makefile 1.1  NMAKE - 命令解释器. 依据Makefile文件里定义的脚本.完毕项目的编译等操作 1.2 Makefile - 定义编译.连接等脚本语言 1.3 ...

  3. Akka FSM 源代码分析

    Akka FSM 源代码分析 萧猛 <simonxiao@qq.com> 啰嗦几句 有限状态机本身不是啥新奇东西,在GoF的设计模式一书中就有状态模式, 也给出了实现的建议.各种语言对状态 ...

  4. Spring3.2 HelloWorld

    直接上图吧: jar包: 项目文件夹一览: 这里的HelloWeb-servlet,xml 是在WEB-INF 下 HelloController: package com.cqu.tutorial; ...

  5. C++ Primer 学习笔记_45_STL实践与分析(19)--建筑常规算法

    STL实践与分析 --泛型算法的结构 引言: 正如全部的容器都建立在一致的设计模式上一样,算法也具有共同的设计基础. 算法最主要的性质是须要使用的迭代器种类.全部算法都指定了它的每一个迭代器形參可使用 ...

  6. async And await异步编程活用基础

    原文:async And await异步编程活用基础 好久没写博客了,时隔5个月,奉上一篇精心准备的文章,希望大家能有所收获,对async 和 await 的理解有更深一层的理解. async 和 a ...

  7. 构造NFS

    一.设备nfs-utils 伺服器: [root@server05 ftp]# yum install nfs-utils 这时会自己主动安装rpcbind需将此服务重新启动nfs服务才干启动 cli ...

  8. maven学习系列(一)—maven安装和基本设置

    maven下载和配置 第一步:下载apache-maven-2.3.2-bin.zip并解压到D:\tools,下载地址http://maven.apache.org/download.cgi 第二步 ...

  9. 【转】Directx11 HelloWorld之HLSL的Effect框架的使用

    最近尝试用了下Directx下的Effect框架,作为一初学者初学者,说下为什么我们要使用Effect框架及其好处吧. 首先Effect最大好处的就是简单,使得编写Shader绘制的程序工作量大大下降 ...

  10. HDU2516-取石子游戏

    取石子游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...