一、前言
通过定义前端loadTemplate公共函数，实现对分别的数据格式及展示模板类型的配置化适配兼容,本例代码主要实现了数据的加载getJSON，再通过String.replace替换的方式，将定义的目标格式替换，如下图所示为操作样例。
二、代码说明
1.测试入口HTML页面 代码如下
<!DOCTYPE html>@b@<html>@b@@b@ <head>@b@ <meta charset="UTF-8" />@b@ <link href="bootstrap.min.css" rel="stylesheet">@b@ <link href="bootstrap-theme.min.css" rel="stylesheet">@b@ </head>@b@@b@ <body>@b@@b@ <br/>@b@ <br/>@b@ <label class="radio-inline">@b@ <input type="radio" name="template" id="template01" value="Template01" checked="checked"> 模板01 （列表模式）@b@ </label>@b@ <label class="radio-inline">@b@ <input type="radio" name="template" id="template02" value="Template02"> 模板02 （网格模式）@b@ </label>@b@ <!--<label class="radio-inline">@b@ <input type="radio" name="template" id="template03" value="Template03"> 模板03 （表格模式）@b@ </label>-->@b@@b@ <br/>@b@ <br/>@b@ <label class="radio-inline">@b@ <input type="radio" name="data" id="data01" value="example01" checked="checked"> 数据01 （单一数据）@b@ </label>@b@ <label class="radio-inline">@b@ <input type="radio" name="data" id="data02" value="example02"> 数据02 （数组数据）@b@ </label>@b@ <label class="radio-inline">@b@ <input type="radio" name="data" id="data03" value="example03"> 数据03 （混合数据）@b@ </label>@b@ @b@ <br/>@b@ <br/>@b@ <button class="btn btn-default" type="button" onclick="loadTemplate();">加载</button>@b@@b@ <br/>@b@ <br/>@b@ <div id="canvas" style="width:850px; height:800px; border: solid 1px #959595; padding: 10px; margin: 10px;"></div>@b@@b@ <div id="content" style="display: none;"></div>@b@@b@ @b@ <!-- Placed at the end of the document so the pages load faster -->@b@ <script src="jquery.min.js"></script>@b@ <script src="bootstrap.min.js"></script>@b@ <script src="holder.js"></script>@b@ <script>@b@ function loadTemplate(){@b@ var selectedTemplate = $("input[name=template]:radio:checked").val();@b@ var selectedData = $("input[name=data]:radio:checked").val();@b@ $.ajaxSetup({async:false});@b@@b@ //加载HTML模板文件@b@ $('#canvas').load(selectedTemplate + '.html #t_frame');@b@ $('#content').load(selectedTemplate + '.html [name=t_content]');@b@ @b@ //加载相关json数据@b@ $.getJSON(selectedData + ".json", function(data,s,x){@b@ for (var i = 0; i < data["items"].length; i++) {@b@ var content = $("#content").html();@b@ $('#t_frame').append( @b@ content.replace(/{{name}}/g,data["items"][i].name)@b@ .replace(/{{value}}/g,data["items"][i].value)@b@ );@b@ }@b@ });@b@@b@ //加载与html模板相对应的js文件。@b@ $.getScript(selectedTemplate + '.js');@b@ @b@ }@b@ </script>@b@ </body>@b@@b@</html>2.加载HTML模板文件
<div id="t_frame" class="list-group">@b@</div>@b@<a name="t_content" class="list-group-item" href="#">@b@ <h4 class="list-group-item-heading">{{name}}</h4>@b@ <p class="list-group-item-text">{{value}}</p>@b@</a>3.获取数据example01.json
{@b@ "items": [@b@ {@b@ "name": "解放J6",@b@ "value": "报价"@b@ }, {@b@ "name": "福田汽车",@b@ "value": "报价"@b@ }, {@b@ "name": "联合卡车",@b@ "value": "报价"@b@ }, {@b@ "name": "大运N8重卡",@b@ "value": "报价"@b@ }@b@ ]@b@}4.目标Templet01模板，具体如下
(function(){@b@@b@ $("#t_frame a:first").addClass('active'); @b@@b@})();5.效果预览如下
三、相关下载