juicer模板引擎使用

http://www.juicer.name/

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/juicer.js"></script>

页面模板

<div class="refund-bottom" id="divRefundRecord"> </div>

<script id="tpl" type="text/template">
{&each ObjectData as it,index}
<div class="lectuer-info">
<span class="photos"><img alt="" src="~/Content/images/pics/50x50.jpg"></span>
<div class="cont">
<span class="clearfix"><em class="fl-l">${it.UserId}</em><em class="fl-r">${it.CreateTime}</em></span>
<span>${it.Explain}</span>
<span class="leave-img"> </span>
</div>
</div>
{&/each}
</script>

// 调用JS
$(function () {
GetList();
});

function GetList()
{
var refundId = 100006;
$.ajax({
url: '/Refund/GetRefundRecordList',
type: 'POST',
dataType: "json",
data: { refundId: refundId },
async: true,
success: function (result) {
$("#divRefundRecord").html(juicer($("#tpl").html(), result));
//result是一个JSON对象, result.ObjectData 是一个数据集合属性,提供遍历模板使用
}
});
}

//后台代码
public ActionResult GetRefundRecordList(int refundId)
{
ResponseModel responseModel = new ResponseModel();
using (var db = new BusinessEntities())
{
var RefundList = db.RefundRecord.Where(e => e.RefundId == refundId).Select(e => new {
e.UserId,
e.Explain,
e.CreateTime
}).ToList();
responseModel.ObjectData = RefundList;
responseModel.IsSuccess = true;
return Content(JsonConvert.SerializeObject(responseModel));
}
}

官网

http://juicer.name/

还有一个

https://github.com/aui/artTemplate