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

            }

        }