ajax配合art-template模板引擎的使用

最近才接觸js的模板引擎據說相比之前使用的js foreach加載後臺返回的json數據簡便不少並且效率方面也很不錯。今天本身玩了一下

後臺使用的是.net mvc，數據庫腳本就不提供了，返回的JsonResult，將數據存放在data中，前臺經過ajax配合模板引擎進行一個調用而後以表格的形式顯示數據。

前臺html代碼：

<a href="#" onclick="GetData()">獲取數據</a>
    <table class="table">
        <tr>
            <td>姓名</td>
            <td>年齡</td>
            <td>說明</td>
        </tr>
        <tbody id="tb">
            
        </tbody>
    </table>

js代碼：固然首先你得先導入art-template.js 下載地址：http://aui.github.io/art-template/

重點來講說這裏：

首先第一步：加載art-template.js的文件

第二步：定義模板引擎並在裏面進行數據的加載吧（我的理解），在網上也找了一下資料，說script type的值不能是text/script，否則會形成沒法解析。也就是說除開text/script應該均可以，這裏我用的是text/template（原諒我不去度娘）。

第三步：就是處理請求回來的數據怎麼顯示了，先來看看ajax請求成功後我直接將data存放在template做爲第二個參數，第一個參數對應定義模板引擎的id經過最後var去接收。完了之後就是在模板引擎中進行渲染，這裏經過each data，這是一種標準語法吧，就比如以前經過模板字符串拼接的一個升級版，固然可能好處更多。data就是後臺返回回來的json數據，

經過{{$(value)}}的方式去拿到對應的數據，這樣看來比之前foreach循環而後拼接字符串真的好太多，後期維護也比較好。

<script src="~/resources/art-template.js"></script>
<script type="text/template" id="tbdata">
    {{each data}}
        <tr>
            <td>{{$value.Name}}</td>
            <td>{{$value.Age}}</td>
            <td>{{$value.Desc}}</td>
        </tr>
    {{/each}}
</script>
 <script>
        function GetData() {
            $.ajax({
                type: "post",
                url: "/Test/Index",
                data: {},
                success: function (data) {
                    var result = template('tbdata', data);
                    $("#tb").html(result);
                }
            });
        }
    </script>

後臺代碼：這裏經過ef從數據庫加載數據

public class TestController : Controller
    {
        testDBEntities db=new testDBEntities();
        // GET: Test
        [HttpPost]
        public JsonResult Index()
        {
            var datas = db.Tests.ToList();
            return Json(new { data = datas });
        }
        
    }

最後的顯示效果：

第一次玩模板引擎，但願之後會有更多的認識。