html/jsp 利用juicer模版添加页面标签内容

运用juicer这个js框架真的很方便,简化了原先利用append等添加内容;但是目前juicer支持的数据类型好像只有json,首先引用js文件

<script type="text/javascript" src="${contextPath }/js/juicer-min.js"></script>
<script type="text/javascript" src="${contextPath }/js/vanwins.lib.min.js"></script>


然后这里是页面的一些标签

<body>
<div class="maxEvent">
</div>
</body>

在js里面进行操作,首先建立模版,获取这个模版,把json数据放到模版里面,将获取数据的模版放到最外层的div中

<script type="text/javascript">
var json={
           "maxInfo":{
	              "matter":"【卫生工具换新】各部门前往后勤部领取卫生工具",
	   
	   }
};
var maxinfo = $("#Info").html();
var compiled = juicer(maxinfo, json);
$(".maxEvent").html(compiled);
</script>
<script id="Info" type="text/template">
<div class="tit">
	<p>最新公告</p>
</div>
<div class="cont">
	{@if maxInfo.img.indexOf("none.png")<0}	
	<img src="&{maxInfo.img}"/>
	{@/if}
	<p>
	    <span>{@if maxInfo.matter.match(/【.*】/)!=null}&{maxInfo.matter.match(/【.*】/)}{@/if}
	    </span>
		&{maxInfo.matter.replace(/【.*】/, "")}
	</p>
</div>      
</script>

需要注意的是,这里取值的方式不同,应该是可以自定义的,我这里用的是用&{}


 

 

你可能感兴趣的:(JavaScript,html,append)