为何开发:
曾经使用过webForm 的repeater 控件配合 datasource来渲染表格和商品列表。
现在的大前端很多**也有类似功能,后台取得json数据后绑定到前台,mvvm 之所以如日中天,正因数据绑定为王。
前台开发时,套用JSON 数据大多数都在使用 var html='<div>'+ jsonData.Id +'</div>' 之类的语句,很繁琐,代码很乱。
所以写了此代码用于代替日常的HTML拼接语句。
优点:小巧,轻量,不足100行代码,生成速度较快。一般1ms-4ms,不超过4ms
缺点:1.暂不支持深层数据引用。如##OjbectData.Name## 2.不支持自定义函数。
使用:##dataName## 作为模板数据,请不要加空格
//
####自定义的HTML Render 模板引擎
####版本信息:v1.0.0.2 Creat By: Star Qin 20160929 QQ: 252455785
//
调用样例: var isRendSucessed = $("#dlRepeatorArtList").handleTemplate("#tpl_ArtList", articleDataListSource);
/**************************************************************************************************************/
<!--JQuery CDN Lib -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js?r=20160901"></script>
<!--商品展示模板-->
<template id="tpl_CommodityH5" style="display: none;">
<div class="list-goods">
<img data-original="##SmallPic##" class="tplimage img-responsive" src="http://img02.xx.com/e/web/150930/00982/163525/placeholder_300x300.png" />
<p>##CommodityName##</p>
<span>¥##CommodityPriceConverted##</span>
<i class="icon icon6"></i>
</div>
</template>
<div class="list-box" id="rptRelationCommodityList"></div>
<script type="text/javascript">
$("#rptRelationCommodityList").handleTemplate("#tpl_CommodityH5", evtData.RspData.CommodityList);
</script>