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":"1","b":"1b"},

            {"show",false,"a":"2","b":"2b"},

            {"show",false,"a":"3","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"指向一个已经标记的脚本标记

 

你可能感兴趣的:(jsrender)