客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：domTemplate开源软件地址：https://gitee.com/parki/domTemplate开源软件介绍：domTemplate.js一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板解析引擎。彻底实现前后端分离，让后端专注业务的处理。####Demo http://parky18.github.io/demo/ ##目录 概述这是一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端引擎。 传统MVC开发模式，V层使用服务器端渲染。美工设计好静态HTML文件，交给后端工程师，需要转换成 1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果 domTemplate.js 模板引擎是通过在标签中添加自定义属性，实现动态模板功能，当没有引入domTemplate脚本， 则自定义标签属性不会被浏览器解析，不会破坏原有静态效果，当引入domTemplate脚本，模板引擎回去解析这些标签属性， 并加载数据进行动态渲染。 下图：对比服务器页面渲染和使用domTemplate前端引擎开发流程
导入 $(function () { $.domTemplate.init(options,callback);//可以通过selector指定根节点，默认根节点是body,表示从body开始，渲染整个页面 }); 或者解析某一个html片段。 $('selector').domTemplate(options,callback);//渲染数据是通过h-model 自动去获取数据，也可以通过data指定全局数据 Options
callback模板渲染成功回调函数, |
| Name | Type | Default | Description |
|---|---|---|---|
| url | String | 发送请求的地址。 | |
| dataType | String | json | json |
| data | String | 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后 | |
| type | String | POST | 请求方式 ("POST" 或 "GET") |
$.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("加载完成") ;}); 刷新model例子1刷新model例子2刷新model例子3
可以把多个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这种方式：还支持以下替换标签写法
| 属性 | 引擎标签 |
|---|---|
| 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位置
<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> <div> <p h-if="{user.id==50}" h-text="用户ID等于50">xxx</p> <p>其他内容</p> </div> 渲染结果
<div> <p>其他内容</p> </div> <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> <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="[email protected]"/> </p> 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> <li h-each="user,userStat : {users}" h-text="{userStat.index+1}---{user.email}">李小璐</li> </ul> <p>遍历map例子</p> <ul> <li h-each="item : {user}" h-text="{item.key}:{item.value}">李小璐</li> </ul> <p>遍历map例子2</p> <ul> <li h-each="item : {{name:'lala',age:25}}" h-text="{item.key}:{item.value}">李小璐</li> </ul> <p>遍历数组例子</p> <ul> <li h-each="item : {users}" h-text="{itemStat.index}:{item}">李小璐</li>> </ul> <p>遍历数组例子2</p> <ul> <li h-each="item : {['lala','lulu']}" h-text="{itemStat.index}:{item}">李小璐</li> </ul> 渲染结果详细看例子遍历list例子遍历map例子遍历数组例子遍历嵌套list例子
$.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称，用时要加上前缀，如定义'test'标签，用时h-test="" 用法
<input type="text" h-tagName="{user.username}" /> | Name | Type | Description |
|---|---|---|
| ctx | Context | 上下文，一般会用到 ctx.options、渲染表达式函数：ctx.compile(exp)和模板渲染函数：ctx.tpl(exp) |
| name | string | 标签名称 |
| exp | string | 标签值 |
<p h-text="用户类型:{user.type}-{user.email}">xxx1</p> 渲染结果
<p h-text="用户类型：{user.type}-{user.email}">用户身份:[email protected]</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:[email protected]</p> 
请发表评论