domTemplate.js
一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎。彻底实现前后端分离，让后端专注业务的处理。
####Demo http://parky18.github.io/demo/
##目录
概述
这是一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端引擎。
传统MVC开发模式，V层使用服务器端渲染。美工设计好静态HTML文件，交给后端工程师，需要转换成 Jsp、Freemarker、Velocity等动态模板文件。这种模式有几个缺点
1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果
2、动态效果和静态效果分别存在不同文件，美工和后端工程师需要分别维护各自页面文件，其中一方需要修改页面，都需要通知另一方进行修改
3、页面数据不能分块加载、获取跨域数据比较麻烦
domTemplate.js 模板引擎是通过在标签中添加自定义属性，实现动态模板功能，当没有引入domTemplate脚本， 则自定义标签属性不会被浏览器解析，不会破坏原有静态效果，当引入domTemplate脚本，模板引擎回去解析这些标签属性， 并加载数据进行动态渲染。 下图：对比服务器页面渲染和使用domTemplate前端引擎开发流程
服务器端模板解析
domTemplate.js前端解析
用法
导入jquery.js或者zepto.js和domTemplate.min.js
$(function () {
$.domTemplate.init(options,callback);//可以通过selector指定根节点，默认根节点是body,表示从body开始，渲染整个页面
});
或者解析某一个html片段。
$('selector').domTemplate(options,callback);//渲染数据是通过h-model 自动去获取数据，也可以通过data指定全局数据
Options
Name
Type
Default
Description
selector
selector
body
根节点选择器
data
json
{}
渲染数据
prefix
string
h-
标签前缀
escape
boolean
true
是否转义
$parentElement
jquery或者zepto对象
$(selector)
当前上下文渲染父元素
$currentElement
jquery或者zepto对象
$parentElement
当前上下文渲染元素
callback
模板渲染成功回调函数,callback(model),所有需要等页面渲染成为做的逻辑需要注册这个回调函数，例如用jquery.lazyload.js实现图片懒加载
model标签
模板引擎通过标签获取渲染数据,并把数据放到上下文Context中
方式1(把h-model取数据放在任意标签):
xxx1
/body>
方式2(把h-model取数据放在任意标签,可以连续取多个Model数据):
xxx1
方式3(把h-model取数据放在任意标签,不同块数据相互不影响):
xxx1
xxx1
方式4(h-model标签可以嵌套使用):
成语
出处:
拼音:
出处:
范例:
成语
出处:
拼音:
出处:
范例:
方式5(可以定义一个全局函数对model数据进行干预):
成语
function modelRender(modelName, res) {
console.info("model名称" + modelName);
console.info(res);
if(!res){//失败
return {error: '错误'};
}
if (modelName == 'data') { //可以对model数据进行修改
res.newslist[0].chengyu = res.newslist[0].chengyu + '(修改)';
return res;
}
}
model标签作用域
只有model标签的子节点才能获得model数据，不同块model数据相互独立不影响，但是单个页面model名称还是建议不要相同
Name
Type
Default
Description
url
String
发送请求的地址。
dataType
String
json
json
data
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后
type
String
POST
请求方式 ("POST" 或 "GET")
刷新model标签
可以通过$.domTemplate.getModel([modelName])方式获得对应对应model，然后调用reload方法，其所属页面块模板会自动刷新下
model方法
Name
Type
Description
setParamsData
object
设置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:'https://i-blog.csdnimg.cn/blog_migrate/2a3bd743d74871ee8a8392fd97ad2c4e.png',title:'测试标题'}
模板:
渲染结果
title='测试标题' alt='测试标题' h-attr="src={img.src},title={img.title},alt={img.title}" />
其他属性标签
引擎除了支持h-attr这种方式：还支持以下替换标签写法
属性
引擎标签
text
h-text
value
h-val
href
h-href
src
h-src
src
h-src
class
h-class
style
h-css
width
h-width
height
h-height
id
h-id
title
h-title
alt
h-alt
如果还需要支持其他标签属性，可以通过$.domTemplate.registerSupportAttr(attrName)进行添加。
html标签
该标签解析结果会显示在对应标签的html位置
渲染结果
个人介绍
删除标签
h-remove 渲染时候会删除有这个标签标识的html
- 李小璐
- 动态页面需要删除这个节点
渲染结果
- 李小璐
if条件标签
xxx
其他内容
渲染结果
其他内容
unless条件标签
xxx
xxx
渲染结果
用户ID不等于50
switch条件标签
渲染结果
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:布尔值，当前循环是否是最后一个
遍历List例子
- 李小璐
遍历map例子
- 李小璐
遍历map例子2
- 李小璐
遍历数组例子
- 李小璐>
遍历数组例子2
- 李小璐
自定义标签
$.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称，用时要加上前缀，如定义'test'标签，用时h-test=""
用法
Name
Type
Description
ctx
Context
上下文，一般会用到 ctx.options、渲染表达式函数：ctx.compile(exp)和模板渲染函数：ctx.tpl(exp)
name
string
标签名称
exp
string
标签值
字符串拼接运算
xxx1
渲染结果
用户身份:uType-parky_18@163.com
其他算术运算
xxx1
渲染结果
0
自定义函数
可以通过$.domTemplate.registerHelper('functionName',function)添加自定义函数，实例:
xxx1
渲染结果
2016-05-30 11:20:42
自定义函数示例
$.domTemplate.registerHelper('toPrefix', function (value) { return 'test:'+value; });
用法
xxx1
渲染结果
test:parky_18@163.com
其他例子
扫一扫
202
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
