文档章节

DomTemplate.js文档---一个让你的静态页面动起来的非侵入式前端模板引擎

parky_18
 parky_18
发布于 2016/06/15 09:21
字数 1894
阅读 102
收藏 0
点赞 0
评论 1

domTemplate.js

一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端模板引擎。彻底实现前后端分离,让后端专注业务的处理。 ####Demo http://parky18.github.io/demo/

##目录

概述

这是一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端引擎。

传统MVC开发模式,V层使用服务器端渲染。美工设计好静态HTML文件,交给后端工程师,需要转换成 JspFreemarkerVelocity等动态模板文件。这种模式有几个缺点

1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果
2、动态效果和静态效果分别存在不同文件,美工和后端工程师需要分别维护各自页面文件,其中一方需要修改页面,都需要通知另一方进行修改
3、页面数据不能分块加载、获取跨域数据比较麻烦

domTemplate.js 模板引擎是通过在标签中添加自定义属性,实现动态模板功能,当没有引入domTemplate脚本, 则自定义标签属性不会被浏览器解析,不会破坏原有静态效果,当引入domTemplate脚本,模板引擎回去解析这些标签属性, 并加载数据进行动态渲染。 下图:对比服务器页面渲染和使用domTemplate前端引擎开发流程

服务器端模板解析domTemplate前端解析
beforeafter

用法

导入jquery.js或者zepto.jsdomTemplate.js

$(function () {
 $.domTemplate.init(options);//可以通过selector指定根节点,默认根节点是body,表示从body开始,渲染整个页面 
 }); 

或者解析某一个html片段。

 $('selector').domTemplate(options);//渲染数据是通过h-model 自动去获取数据,也可以通过data指定全局数据 

Options

NameTypeDefaultDescription
selectorselectorbody根节点选择器
datajson{}渲染数据
prefixstringh-标签前缀
escapebooleantrue是否转义
$parentElementjquery或者zepto对象$(selector)当前上下文渲染父元素
$currentElementjquery或者zepto对象$parentElement当前上下文渲染元素

model标签

模板引擎通过<h-model>标签获取渲染数据

  <body h-model="{user:{url:'http://localhost:8080/v/game/getUser'}}"></body>
  或者
  <div h-model="{user:{url:'http://localhost:8080/v/game/getUser'}}"></div>

model请求参数

NameTypeDefaultDescription
urlString发送请求的地址。
dataTypeStringjsonjson
dataString发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后
typeStringPOST请求方式 ("POST" 或 "GET")

刷新model标签

可以通过$.domTemplate.getModel([modelName])方式获得对应对应model,然后调用reload方法,其所属页面块模板会自动刷新下 model方法

NameTypeDescription
setParamsDataobject设置URL请求参数,例如分页参数:{page: page}。
reload(options,callback)object 刷新,appendType=after:返回数据往原来的列表后面拼接; appendType=before:返回数据往原来的列表前面拼接; appendType=page:清除原来列表数据,添加返回数据;

例子

$.domTemplate.getModel('list1').setParamsData({page: page}).reload({appendType: 'page'}, function () { 
console.info("加载完成") ;
}); 

属性标签

可以把多个DOM标签用逗号分隔,解析后会把对应的标签属性替换

model数据:  
 {src:'http://www.wed114.cn/jiehun/uploads/allimg/160426/39_160426110624_1.jpg',title:'测试标题'}  
模板:  
 <img src="../../images/xx.png" h-attr="src={img.src},title={img.title},alt={img.title}" /> 

渲染结果

 <img src="http://www.wed114.cn/jiehun/uploads/allimg/160426/39_160426110624_1.jpg" 
 title='测试标题' alt='测试标题' h-attr="src={img.src},title={img.title},alt={img.title}" /> 

其他属性标签

引擎除了支持h-attr这种方式:还支持以下替换标签写法

属性引擎标签
texth-text
valueh-val
hrefh-href
srch-src
srch-src
classh-class
styleh-css
widthh-width
heighth-height
idh-id
titleh-title
alth-alt

如果还需要支持其他标签,可以通过$.domTemplate.registerSupportAttr(attrName)进行添加。

html标签

该标签解析结果会显示在对应标签的html位置

<div h-html="{user.memo}">xxxxx</div>

渲染结果

<div h-html="{user.memo}"><p>个人介绍</p></div>

删除标签

h-remove 渲染时候会删除有这个标签标识的html

 <ul> 
 <li>李小璐</li> 
 <li h-remove="">动态页面需要删除这个节点</li> 
 </ul> 

渲染结果

 <ul> 
 <li>李小璐</li> 
 </ul> 

if条件标签

<div> 
 <p h-if="{user.id==50}" h-text="用户ID等于50">xxx</p> 
 <p>其他内容</p> 
 </div> 

渲染结果

 <div> 
 <p>其他内容</p> 
 </div> 

unless条件标签

 <div> 
 <p h-if="{user.id==50}" h-text="用户ID等于50">xxx</p> 
 <p h-unless="{user.id==50}" h-text="用户ID不等于50">xxx</p> 
 </div> 

渲染结果

<div> 
 <p h-unless="{user.id==50}" h-text="用户ID不等于50">用户ID不等于50</p> 
 </div> 

switch条件标签

<p h-switch="{user.id}"> 
 <input type="text" h-case="20" h-val="{user.email}"/> 
 <input type="text" h-case="60" h-val="拉拉"/> 
 <input type="text" h-case="*" h-val="丽丽"/> 
 </p> 

渲染结果

<p h-switch="{user.id}"> 
 <input type="text" h-case="20" h-val="{user.email}" value="parky_18@163.com"/> 
 </p> 

each遍历标签

t:each属性用于迭代循环,语法:th:each="obj,iterStat:{objList}"迭代对象可以是Java.util.List,java.util.Map,数组等; iterStat称作状态变量,如果没有显示设置状态变量,会默 认给个“变量名+Stat"的状态变量。属性有: index:当前迭代对象的index(从0开始计算) count: 当前迭代对象的index(从1开始计算) size:被迭代对象的大小 current:当前迭代变量 even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算) first:布尔值,当前循环是否是第一个 last:布尔值,当前循环是否是最后一个

 <p>遍历List例子</p> 
 <ul h-each="user,userStat : {users}"> 
 <li h-text="{userStat.index+1}---{user.email}">李小璐</li> 
 </ul> 

 <p>遍历map例子</p> 
 <ul h-each="item : {user}"> 
 <li h-text="{item.key}:{item.value}">李小璐</li> 
 </ul> 

 <p>遍历map例子2</p> 
 <ul h-each="item : {{name:'lala',age:25}}"> 
 <li h-text="{item.key}:{item.value}">李小璐</li> 
 </ul> 

 <p>遍历数组例子</p> 
 <ul h-each="item : {users}"> 
 <li h-text="{itemStat.index}:{item}">李小璐</li>> 
 </ul> 

 <p>遍历数组例子2</p> 
 <ul h-each="item : {['lala','lulu']}"> 
 <li h-text="{itemStat.index}:{item}">李小璐</li> 
 </ul> 

渲染结果详细看例子

自定义标签

 $.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称,用时要加上前缀,如定义'test'标签,用时h-test="" 

用法

 <input type="text" h-tagName="{user.username}" /> 

参数

NameTypeDescription
ctxContext上下文,一般会用到 ctx.options、渲染表达式函数:ctx.compile(exp)和模板渲染函数:ctx.tpl(exp)
namestring标签名称
expstring标签值

字符串拼接运算

 <p h-text="用户类型:{user.type}-{user.email}">xxx1</p> 

渲染结果

 <p h-text="用户类型:{user.type}-{user.email}">用户身份:uType-parky_18@163.com</p> 

其他算术运算

 <p h-text="{user.id-user.id}">xxx1</p> 

渲染结果

 <p h-text="{user.id-user.id}">0</p> 

自定义函数

可以通过$.domTemplate.registerHelper('functionName',function)添加自定义函数,实例:

 <p h-text="{dateFormat(user.createTime,'yyyy-MM-dd hh:mm:ss')}">xxx1</p> 

渲染结果

 <p h-text="{dateFormat(user.createTime,'yyyy-MM-dd hh:mm:ss')}">2016-05-30 11:20:42</p> 

自定义函数示例

 $.domTemplate.registerHelper('toPrefix', function (value) { return 'test:'+value; }); 

用法

 <p h-text="{toPrefix(user.email)}">xxx1</p> 

渲染结果

 <p h-text="{toPrefix(user.email}">test:parky_18@163.com</p> 

© 著作权归作者所有

共有 人打赏支持
parky_18

parky_18

粉丝 2
博文 2
码字总数 2623
作品 2
广州
加载中

评论(1)

喻恒春
喻恒春
向你推荐 Real-DOM 模板引擎 PowJS, 工作在浏览器环境, 直接在 DOM Tree 上编译, 渲染, 可导出导入. DOM Tree 就是模板.
看上去好像和 DomTemplate 一样工作于 DOM, 但是不同的是, PowJS 不但解决了 Real-DOM, 也解决了 Real-JavaScript. 环境中的实时变量在模板运行时是有效的. 也就是说 PowJS 的 Context 是整个 DOM 环境.
用 PowJS 就像用 JS.

本质上 PowJS 提供了一种机制, 在构建 DOM Tree 的过程中融入整个运行环境.

https://github.com/powjs/powjs
前端HTML模板解析引擎--domTemplate.js

一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板引擎。彻底实现前后端分离,让后端专注业务的处理。 传统MVC开发模式,V层使用服务器端渲染。美工设...

parky_18 ⋅ 2016/06/16 ⋅ 0

parky/domTemplate

domTemplate.js 一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎。彻底实现前后端分离,让后端专注业务的处理。 ####Demo http://parky18....

parky ⋅ 2016/06/22 ⋅ 0

关于beetl认识的几个误区

beetl 现在国内越来越流行,社区网站每日访问量都有上千,下载量每日保持在20个左右(无法统计maven的)。qq群在满员之前已经踢走了一拨又一拨的不活跃会员还有少量价值观不符合的人(写这个...

闲大赋 ⋅ 2016/09/14 ⋅ 17

SpringBoot --web 综合开发

上篇文章介绍了Spring boot初级教程 :《 spring boot(一):入门篇 》,方便大家快速入门、了解实践Spring boot特性;本篇文章接着上篇内容继续为大家介绍spring boot的其它特性(有些未必是s...

mjt95 ⋅ 01/15 ⋅ 0

springboot(二):web综合开发

上篇文章介绍了Spring boot初级教程:spring boot(一):入门篇,方便大家快速入门、了解实践Spring boot特性;本篇文章接着上篇内容继续为大家介绍spring boot的其它特性(有些未必是spring ...

ityouknow ⋅ 2017/04/11 ⋅ 0

Jspxcms 8.0.1 发布,国内开源 Java CMS

Jspxcms-8.0.1-release今天正式发布。 改进(Improvement) 在站点设置里可以增加手机模板主题修改,不用到站点管理里修改。 sql脚本增加commit语句,避免因为执行脚本时为提交导致数据没有正确...

jspxcms ⋅ 2017/06/22 ⋅ 20

前端集成解决方案--baidu yogurt

yogurt 是基于 fis 扩展针对服务端为 express.js 的前端集成解决方案。 在阅读此文档之前,希望你最好对 fis 有一定的了解。此工具主要负责前端编译与环境模拟,让你更专注、更快速地开发前端...

叶秀兰 ⋅ 2014/07/28 ⋅ 0

AngularJS应用开发思维之1:声明式界面

这篇博客之前承接上一篇:http://www.cnblogs.com/xuema/p/4335180.html 重写示例:模板、指令和视图 AngularJS最显著的特点是用静态的HTML文档,就可以生成具有动态行为的页面。 还是前面的...

笔阁 ⋅ 2015/03/16 ⋅ 0

13 款 JavaScript 模板引擎

JavaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎。(排名不分先后顺序) 1. Mustache 基于javascript 实现的模...

红薯 ⋅ 2012/04/15 ⋅ 5

推荐13款javascript模板引擎

javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎。(排名不分先后顺序) 1. Mustache 基于javascript 实现的模...

李朝强 ⋅ 2013/07/29 ⋅ 1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部