Visro 应用的前端模板工具介绍 -JsRender

1.什么是JsRender：

JsRender是一款JavaScript模版引擎，是具有简单直观，功能强大，可扩展的，早期版本是基于JQUERY 写的，后来作者重构了，就不再依赖JQUERY了.

它的官方网站在 http://www.jsviews.com/#jsrender。 英文好的可以参考官方文档和示列。 在Visor中，可以定义JsRender模板，然后通过设计的ER 对象和Entity 对象数据生成相应的SQL 和 Entity 类文件。 Visor 具体应用不在这里累赘。大家自己可以去体验

Http://www.visor.com.cn.  下面书归正传

2.为什么需要模板

下面是一个jQuery例子：

var html = '';

$.each(data.persons, function (i, item) {

html += "<tr><td>" + item.FirstName + "</td><td><a href='/Person/Edit/"

　　　　　　　　+ item.PersonID + "'>Edit</a> | <a href='/Person/Details/"

　　　　　　　　+ item.PersonID + "'>Details</a> | <a href='/Person/Delete/"

　　　　　　　　+ item.PersonID + "'>Delete</a></td></tr>";

});

$('#XXX').append(html);

 

这样写很明显的坏处就是：这样的代码可见性太低，很难维护。

再来看看JsRender的例子

//Templates

<script  id="peopleTemplate" type="text/x-jsrender">
    <div>
    {{for address}}
        {{if show}}
            {{:a}}</br>
        {{else}}
            {{:b}}</br>
        {{/if}}
    {{/for}}
    </div>
</script>

//Container

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

//Data

<script>
 var people=[
     {  "name":"jose",
         "address":[
            {"show":true,"a":"","b":"1b"},
            {"show",false,"a":"","b":"2b"},
            {"show",false,"a":"","b":"3b"}
         ]
     }
]    

//Render Data

//Insert into Container

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

 

这样的代码看起来结构清晰多了。

3.JsRender三要素

从上面JsRender的例子可以看出来，JsRender需要三要素，分别为模板（Templete），容器（Container），数据（Data）。主要行为是将数据渲染进模板（Render Data），再将渲染结果插入容器（Insert into Container）。

4.JsRender渲染模板

在JsRender中，是通过调用方法render()来渲染模板的。有以下3种方式：

1. 如果已经存在一个template的对象，则可以使用template.render(...)

如上例

 

1. 如果已经有一个通过名字注册的template，名字为("personTmpl"),则可以使用$.render.personTmpl(...)调用。

$.templates("personTmpl", "#personTemplate");

var html = $.render.personTmpl(person);

1. 如果该template是在一个script脚本块中定义的，并且该脚本块使用selector“#myTmpl"，则同样可以使用$("# personTemplate").render(...)调用

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

var html = $("#personTemplate").render(person);

第1和第2种方式是渲染前编译：

/*A、获取模板对象的方式编译*/

var xxxTemplate = $.templates("#xxxTemplate");//既可以是字符串也可以是脚本标记，B是字符串

var html = xxxTemplate.render(data);

/*B、指定模板名称的方式编译*/

$.templates('xxx','<b>{{:name}}</b>');

$.templates({

　　'yyy','<b>{{:name}}</b>',

　　'zzz','<b>{{:name}}</b>'

})；

var html = $.render.xxx(data);//注意，第B种方式可以同时渲染多个模板，但是第A种方式不行

 

第3种方式是无需编译直接渲染：

var html = $("#XXXXX").render(data); // XXX代表某个脚本标记，也就是上面的<script id="XXX" type="text/x-jsrender">.......</script>

总结一下可以看出：

1、无编译直接渲染的方式无法用于字符串的渲染；渲染前编译的方式字符串和脚本标记皆可。

2、制定模板名称的方式编译可以同时编译多个模板，但是获取模板对象的方式编译只能编译一个模板

5. JsRender模板（Template）

基本的JsRender标签：JsRender 模板主要由html标记和jsrender标签（像上面的{{：XXX}}）组成。所有的Jsrender标签都被两个大括号包裹，中间既可以是参数也可以是表达式（如：{{：#index}}和{{：#index+1}}），下面看一下一些基本的Jsrender标签。

描述

例子

输出

参数firstName的值（未被Html编码）

{{:firstName}}

Madelyn

参数movie的属性--releaseYear的值（未被html编码）

{{:movie.releaseYear}}

1987

比较（表达式,未被html编码）

{{:movie.releaseYear < 2000}}

true

经html编码的值（更加安全，但是要耗点内存）

{{>movie.name}}

Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span>

经html编码的值

{{html:movie.name}}

Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span>

5.1 JsRender数据遍历：

{{for xxx}}

    <li>{{:xxx.property }}</li>

{{/for}}

如果想获取xxx本身，可以这样写：

{{for  xxx yyy}}

    <li>{{:#data}}</li>

{{/for}}

上面的例子说明了两点，1、for不仅仅可以遍历一组数据，他甚至可以同时遍历两组和多组数据（强大了 吧...）。2、上面的#data就表示xxx和yyy本生。试想一下，如何xxx和yyy都表示一个基本元素（字符串、整数等等、任意交叉）的数组，那 么这个是不是能很好的完成遍历呢？说道#data，不得不提一下#index，#data和#index都是内置的JsRender关键字(#data为数据本身,#index默认值为0)。下面再看一个例 子：

 

5.2JsRender条件

{{if  fullprice}}

    html markup

{{else halfprice}}

    html markup

{{else}}

    html markup

{{/if}}

1、if....else....else表示了if  elseif  else，这里的else表示了elseif。

2、{{if  fullprice}}中的fullprice条件表达式表示的是fullprice不为空。其实还可以有更懂的条件表达式可以应用到这里来，如下：

表达式	举例	介绍
||	{{ :a || b }}	或
&&	{{ :a && b }}	且
!	{{ :!a }}	非
<= 和>=和 <和 >	{{ :a <= b }}	比较
=== 和 !==	{{ :a === b }}	等于和不等于

3、在条件表达式中还可以用一些属性进行比较，如{{if  xxx.length > 50}}等等

5.3模板嵌套

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

    {{for #data}}

        <h3>{{:name}}</h3>

        <ul>

        {{for language tmpl="#studentLanguageTemplate" /}}

        </ul>

    {{/for}}

</script>

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

    <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>

</script>
//render
$("#studentList").html($("#studentTemplate").render(studnets));

以上是为JsRender的模板嵌套，只需要设置{{for}}的tmpl属性即可。这时，tmpl是一个脚本标记。

如果studentLanguageTemplate已经被$.templates()编译，那么也可以这么写：

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

    {{for #data}}

        <h3>{{:name}}</h3>

        <ul>

        {{for language tmpl="studentLanguageTemplate" /}}

        </ul>

    {{/for}}

</script>

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

    <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>

</script>

//render

$.templates("studentLanguageTemplate", "#studentLanguageTemplate");

$("#studentList").html($("#studentTemplate").render(studnets));

上面的templ不再“#XXX”指向一个脚本标记，而是"XXX"指向一个已经标记的脚本标记。