domTemplate.js if条件标签each遍历标签参数评论(0) 介绍
一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板引擎。彻底实现前后端分离,让后端专注业务的处理。
传统MVC开发模式,V层使用服务器端渲染。美工设计好静态HTML文件,交给后端工程师,需要转换成Jsp、Freemarker、Velocity等动态模板文件。这种模式有几个缺点
1、动态模板文件不能被浏览器解释、必须要运行在服务器中才能显示出效果
2、动态效果和静态效果分别存在不同文件,美工和后端工程师需要分别维护各自页面文件,其中一方需要修改页面,都需要通知另一方进行修改
3、页面数据不能分块加载、获取跨域数据比较麻烦
domTemplate.js 模板引擎是通过在标签中添加自定义属性,实现动态模板功能,当没有引入domTemplate脚本,
则自定义标签属性不会被浏览器解析,不会破坏原有静态效果,当引入domTemplate脚本,模板引擎回去解析这些标签属性, 并加载数据进行动态渲染。
下图:对比服务器页面渲染和使用domTemplate前端引擎开发流程
服务器端模板解析 | domTemplate前端解析 |
---|---|
![](/static/assets/osapp/images/dc5d51a0b7ce659427f6e6fe8f7ae747.jpeg) | ![](/static/assets/osapp/images/30eeb950e2183b963b272b2fc4d622d5.jpeg) |
用法
导入jquery.js或者zepto.js和domTemplate.js
$(function () { $.domTemplate.init(options); //可以通过selector指定根节点,默认根节点是body,表示从body开始,渲染整个页面 });
或者解析某一个html片段。
$('selector').domTemplate(options); //渲染数据是通过h-model 自动去获取数据,也可以通过data指定全局数据
if条件标签
xxx 其他内容 ### switch条件标签
each遍历标签
遍历List例子
- 李小璐
自定义标签
$.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称,用时要加上前缀,如定义'test'标签,用时h-test=""
用法
参数
Name | Type | Default | Description |
---|---|---|---|
ctx | Context | 上下文,一般会用到 [ctx.options](http://parky18.github.io/demo/#js-ctx- options)、渲染表达式函数:ctx.compile(exp)和模板渲染函数:ctx.tpl(exp) | |
name | string | 标签名称 | |
exp | string | 标签值 |
自定义函数
可以通过$.domTemplate.registerHelper(‘functionName’,function)添加自定义函数,实例:
xxx1
渲染结果
2016-05-30 11:20:42
自定义函数示例
$.domTemplate.registerHelper('toPrefix', function (value) { return 'test:'+value; });
用法
xxx1
渲染结果
test:lala@163.com
Demo http://parky18.github.io/demo/
的码云指数为
超过 的项目
加载中
评论(0)
__插入表情
{{ emoji.type }}
__插入软件
__发表评论
__
删除一条评论
评论删除后,数据将无法恢复
取消
确定