JsRender不少前端人员应该都用过,它是一个比较强大的模板,不牵涉太多技术依赖,使用起来非常舒服。我本人在前端开发中使用React之前,都是用的它了(实际上我感觉React没有JsViewes好用)。不管怎么说,先来学习下JsRender技术吧,如果前端的开发环境比较单纯,还是很适合的。

一、JsRender特性

新一代的前端渲染模板

  • 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中;这避免了在JS中通过“+”等手动分割、连接字符串的复杂过程。

  • 针对高性能和纯字符串渲染进行了优化

  • 无需依赖DOM和jQuery

优先使用场景

  • 元素重复出现
  • 动态加载数据,并前端显示

    二、JsRender使用

  1. 引入js:jsrender.js
  2. 定义模板:
  3. 准备好要显示的数据 json对象 var data = { xxx:“text” }
  4. 编译成元素:document.getElementById(“XXX”).render(data);   或 $("#XXX").render(data);
  5. 通过容器元素的append、before、after显示

基本语法

  • 原始赋值: {{:属性名}},显示原始数据
  • 转码赋值: {{>属性名}},显示HTML编码后的数据
  • 控制语句可嵌套使用:
    • 判断: {{if 表达式}} … {{else}} … {{/if}}
    • 循环: {{for 数组}} … {{/for}}
  • 其它进阶
    • 模板嵌套,使用:{{for tmpl="#另一个模板" /}}
    • 转换器 $.views.converters()定义,使用:{{func:属性名}}
    • 帮助方法 $.views.helpers()定义,使用:{{if ~func(arg1, arg2, ...)}}
    • 自定义标签 $.views.tags()

     几个你可能不知道的要点

  • 获取当前的索引:#index,如{{if #index==0}} ... {{/if}}

  • 获取整个数据:#data,    如<option value="{{:#index}}">{{:#data}}</option>

  • 获取父模板:#parent,    如{{if (#parent.data.general==0)}} ... {{/if}}

三、举个例子

下图中是我以前做的一个Web页面:

它的数据来源大概是这样:

[
{
id:12,
cid:195,
type:"问题简述",
impact:"错误级别",
status:"处理状态",
owner:"处理人",
count:1,
path:"问题所在文件的SVN路径",
rev:对应文件的SVN版本号,

} , ...
]

  我们关注的是这个模板是怎么写的:

大家可以看上图中标红的部分,除了helper与tag外,大部分功能都用上了。我实在不想好好做个demo给大家下载了,本身不复杂,不明白可以再交流。

四、性能比较

转载请注明原址:http://www.cnblogs.com/lekko/p/5888962.html

前端渲染利器——JsRender入门的更多相关文章

  1. JsRender 前端渲染模板基础学习

    JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...

  2. 前端学习 node 快速入门 系列 —— 服务端渲染

    其他章节请看: 前端学习 node 快速入门 系列 服务端渲染 在简易版 Apache一文中,我们用 node 做了一个简单的服务器,能提供静态资源访问的能力. 对于真正的网站,页面中的数据应该来自服 ...

  3. Vue.js 2.0源码解析之前端渲染篇

    一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...

  4. 前端学习 node 快速入门 系列 —— 初步认识 node

    其他章节请看: 前端学习 node 快速入门 系列 初步认识 node node 是什么 node(或者称node.js)是 javaScript(以下简称js) 运行时的一个环境.不是一门语言. 以 ...

  5. 前端学习 node 快速入门 系列 —— 报名系统 - [express]

    其他章节请看: 前端学习 node 快速入门 系列 报名系统 - [express] 最简单的报名系统: 只有两个页面 人员信息列表页:展示已报名的人员信息列表.里面有一个报名按钮,点击按钮则会跳转到 ...

  6. 四、vue前端路由(轻松入门vue)

    轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...

  7. 【大前端之前后分离01】JS前端渲染VS服务器端渲染

    前言 之前看了一篇文章:@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离,文中论述了为何要前后分离,站在前端的角度来看,是很有必要的:但是如何说服团队使用前端渲染方案却是一个现 ...

  8. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  9. 前端开发利器—FIDDLER 转

    http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...

随机推荐

  1. 《LoadRunner12七天速成宝典》签售会2016-12-17北京

    报名地址: http://www.after615.com/actives/s?id=3141&time=1480042829608&sign=9ac8e25e9ab3cf57f613 ...

  2. 编写高质量代码:改善Java程序的151个建议(第8章:异常___建议114~117)

    建议114:不要在构造函数中抛出异常 Java异常的机制有三种: Error类及其子类表示的是错误,它是不需要程序员处理也不能处理的异常,比如VirtualMachineError虚拟机错误,Thre ...

  3. IdentityServer4 使用OpenID Connect添加用户身份验证

    使用IdentityServer4 实现OpenID Connect服务端,添加用户身份验证.客户端调用,实现授权. IdentityServer4 目前已更新至1.0 版,在之前的文章中有所介绍.I ...

  4. Function.prototype.toString 的使用技巧

    Function.prototype.toString这个原型方法可以帮助你获得函数的源代码, 比如: function hello ( msg ){ console.log("hello& ...

  5. 万向节锁(Gimbal Lock)的理解

    [TOC] 结论 我直接抛出结论: Gimbal Lock 产生的原因不是欧拉角也不是旋转顺序,而是我們的思维方式和程序的执行逻辑没有对应,也就是说是我们的观念导致这个情况的发生. 他人解释 首先我们 ...

  6. MMORPG大型游戏设计与开发(攻击区域 扇形)

    距离上次发布已经有了很长一段时间,期间由于各种原因没有更新这方面的技术分享,在这里深表遗憾.在MMO或其他的游戏中,会有针对各种形状的计算,通常在攻击区域里不会很复杂,常见的为矩形.圆形.扇形.今天分 ...

  7. Java

    2016-12-17  21:10:28 吉祥物:Duke(公爵)    Logo:咖啡(爪哇岛盛产咖啡)  An overview of the software development proce ...

  8. Xamarin.Android通知详解

    一.发送通知的机制 在日常的app应用中经常需要使用通知,因为服务.广播后台活动如果有事件需要通知用户,则需要通过通知栏显示,而在Xamarin.Android下的通知需要获取Notification ...

  9. 开源一个WEB版本GEF,基于SVG的网页流程图框架

    8月开始断断续续的制作这个web gef,没有任何依赖,完全原生js开发,目前已经完成了雏形,基本上可以在项目里应用了. 下图展示的是demo1的效果,包括拖拽,生成连线,点击生成\取消墙体,整个de ...

  10. "用户增长"--快速身份认证实现用户增长的技术和产品方案

    "用户增长"--快速身份认证实现用户增长的技术和产品方案 1   引言 作为一个互联网产品,用户量的增长是一个非常重要的衡量指标. 这是一个集合了销售,市场,运营,技术的综合能力. ...