我们在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);
});
上面也就实现了我们使用模板渲染，并且根据渲染的模板,给每个数据都添加一条记录，实现相关的操作