我们在javaweb编程中往往从数据库中将数据取出来,使用模板渲染到页面上,渲染的数据上我们又希望可以产生不同的响应对于这样的问题,我们应该怎样实现
场景的描述:
<ul class="ewb-choice-item clearfix" id="oulist"> </ul>
使用模板:
<!--服务部门渲染的list页面 --> <script type="text/x-template" id="oulistTemp"> {{#serveTypeOuList}} <li class="ewb-choice-list cur l" ><a style="cursor:pointer" value="{{ouguid}}">{{ouname}}</a></li> {{/serveTypeOuList}} </script>
引用对应的js:
<!-- 模板渲染控件 --> <script src="js/pub_lyg/mustache.js"></script>
页面对应的js:
var M = Mustache; var oulistTemp = $('#oulistTemp').html(); var $oulist = $("#oulist");
获取数据并且渲染:
// 主管部门的渲染 $.ajax({ url : 'ServeType/getservetypeoulist',success : function(data) { var rendered = M.render(oulistTemp,data); $oulist.html(rendered); $("#oulist").children("a:first-child").addClass('cur'); } });
给每个渲染出来的数据添加事件:
$("#oulist").on("click","a",function() { var od = $(this).attr("value"); ouguid = od; $('.ewb-choice-list a').removeClass('cur'); $(this).addClass('cur'); buildList(ouguid,servename,5); });
上面也就实现了我们使用模板渲染,并且根据渲染的模板,给每个数据都添加一条记录,实现相关的操作