juicer模板引擎使用

Posted 2020-07-27

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 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