前端页面 数据处理mustache.js script的text/template模板的使用

背景：js动态获取数据加载到页面，之前都是字符串拼接，然后append之类的，短的数据很方便，但是一块一块的比较多的数据就很方便，显得比较杂乱！从接触前端模板与vue中得到想法，使用script的text/template模板配合mustache.js加载数据。

事先准备引入js（jquery，mustache）

<script src="js/jquery_172.js" language="javascript"></script>
<script type="application/javascript" src="js/mustache.js"></script>
<!--https://github.com/janl/mustache.js 下载mustache.js-->

template模板

<script type="text/template" id='new_reply'>
	<li>
		<div class="head"><img src="<?php echo $user_info['avatar']; ?>" /></div>//初始页面时加载的php传来的数据
		<div class="name"><?php echo $user_info['nickname']; ?></div>
		<div class="content">{{content}}</div>//mustache.js渲染过后的数据
		<div class="time">{{dated}}</div>
		<div class="zan" onclick="likeAction({{id}},this)">0</div><!--点赞之后添加样式on-->
	</li>
</script>

填充数据到模板并使用模板

//tmplate模板(配合Mustache)的应用
function toHtml(content,id,dated){
	//实例参数
	var data = {content:content,id:id,dated:dated};
	//获取模板内的数据（内容）
	var template = $("#new_reply").html();
	//使用mustache.js进行模板解析填充数据
	var view = Mustache.render(template, data);
    //将填充数据之后的模板进行操作（主要是插到html中显示）
	$("#reply_dom").prepend(view);
}