handleTemplate
a jquery Plus for javascript to DataBind Template
为何开发: 曾经使用过webForm 的repeater 控件配合 datasource来渲染表格和商品列表。
现在的大前端很多思想也有类似功能,后台取得json数据后绑定到前台,mvvm 之所以如日中天,正因数据绑定为王。
前台开发时,套用JSON 数据大多数都在使用 var html='
所以写了此代码用于代替日常的HTML拼接语句。
希望喜欢此模板的同学增扩此功能。
优缺分析:
优点:小巧,轻量,不足100行代码,生成速度较快。一般1ms-4ms,不超过4ms
缺点:1.暂不支持深层数据引用。如##OjbectData.Name## 2.不支持自定义函数。
使用:##dataName## 作为模板数据,请不要加空格
//
####自定义的HTML Render 模板引擎
####版本信息:v1.0.0.2 Creat By: Star Qin 20160929 QQ: 252455785
//
功能:指定【dlRepeatorArtList】 装配容器的内容填充为相应的数据+模拟模板
调用样例: var isRendSucessed = $("#dlRepeatorArtList").handleTemplate("#tpl_ArtList", articleDataListSource);
参数:1.以【articleDataListSource】为数据源
参数:2.以【tpl_ArtList】为模板
参数:3.回调函数【CallBack_Function】
参数:4. 无参或0-1,html() 默认直接原样填充,2.向下Append(), 3.则向上PerAppend() 填充
返回: 套接HTML是否执行成功 true|| false
/**************************************************************************************************************/
使用方法
1.引用jquery Lib
2.写一个 template模板
##CommodityName##
¥##CommodityPriceConverted##
3.给定一个渲染区域
4.调用Html Render
$("#rptRelationCommodityList").handleTemplate("#tpl_CommodityH5", evtData.RspData.CommodityList);
5. OK Fly 完成,等它执行吧