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"指向一个已经标记的脚本标记。

时间: 2024-10-12 14:38:19

Visro 应用的前端模板工具介绍 -JsRender的相关文章

前端常用工具介绍

获取键盘按键的 JavaScript keycode:http://keycode.info/ 扁平化设计配色 :https://flatuicolors.com/

前端构建工具gulpjs的使用介绍及技巧

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm inst

前端构建工具gulpjs的使用介绍及技巧(转载)

本文转载自无双 ,原文地址 http://www.cnblogs.com/2050/p/4198792.html. 感谢原博主的辛苦总结. gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的AP

[转载]前端构建工具gulpjs的使用介绍及技巧

转载地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp

前端构建工具gulpjs的使用介绍及技巧(转)

http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 本文导航: gulp的安装 开始使用gulp gulp的API介绍 一些常用的gulp插件 1.gulp的安装 首

前端相关开发工具介绍

1.常用前端开发工具-编辑器 sublimetext:Sublime Text 是一款流行的代码编辑器软件,也是HTML和散文先进的文本编辑器,可运行在Linux,Windows和Mac OS X.也是许多程序员喜欢使用的一款文本编辑器软件. atom:他们使用目前最先进流行的技术重新打造了一款称为"属于21世纪"的代码编辑器--Atom, 它开源免费跨平台,并且整合 GIT 并提供类似 SublimeText 的包管理功能,支持插件扩展,可配置性非常高 vim:后台人员使用,Vim是

对网站前端开发工具和浏览器的介绍

Web 前端开发工具 1.NotePad ① 占用内存小,微软自带,免安装. ② 不方便编辑代码,一次只能打开一个文件. ③ 不可扩展插件,写代码效率低. ④ 对于代码缩进不太友好. ⑤ 通常来说支持基本的纯文字编辑工作.格式不是很好控制. 2.EditPlus ① 小巧但功能强大,占用内存小. ② 颜色标记智能代码提示以及高亮显示. ③ 同时编辑多个文件 ④ 可支持各类丰富的插件. ⑤ 支持代码高亮显示,并且支持多种语言. ⑥ NotePad开源且跨平台. ⑦ 方便编辑代码.可以同时编辑多个文

前端构建工具gulp.js的使用介绍及技巧

一.gulp的安装 1.首先确保已经安装了node.js的环境,然后以全局的方式安装gulp 全局安装gulp--->>>npm install -g gulp 2.全局安装后,切换到gulp项目中在单独安装一次,将目录切换到gulp项目中去 局域安装gulp--->>>npm install gulp 3.安装依赖,即在安装的时候把gulp写进项目package.json文件的依赖中 npm install --save-dev gulp 二.开始使用gulp 1.和

前端性能测试工具hiper介绍

对前端性能测试工具还不了解,在请教了旁边的前端同事后学习到了简单的工具,在这里总结下. 前端的性能测试测什么? 以下是复制: 渲染引擎工作流 dom树构建:从html标签的解析开始,将各种标签解析为dom树中的各个节点,标签和dom树的中的节点是一一对应关系. 渲染树构建:将CSS和style标签中的样式信息解析为渲染树,渲染树由一些包含有颜色和大小等属性的矩形组成,它们将被按照正确的顺序显示到屏幕上. 渲染树布局和绘制:渲染树确定各个dom节点在屏幕中单确切位置,根据渲染树中的颜色等信息绘制出