最近才接觸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 });

        }

    }

最後的顯示效果：

第一次玩模板引擎，希望以後會有更多的認識。