jTemplates的教程，包括{#if}{#foreach}{#for}的简单使用
最近在做一些局部刷新的分页工作，一般不使用既成的插件的话，就是在脚本里面重新渲染一个局部的html，把需要局部分页的模块重写一遍，还需要在控制器里再定义一个方法返回所需的局部数据，这种做法相当冗余，所以在这里推荐jTemplates的使用。
jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现，可以配合AJAX,JSON一起协同工作，模板内容可以用JS代码，实现了活动更新，可以自动从服务器更新模板生成的内容。
需要引用jquery.js和jquery-jtemplates.js两个脚本，可以到jTemplates官网下载，附地址（点击导航栏的“Download”进入下载页，选择所需版本下载即可）：
http://jtemplates.tpython.com/
直接在我这里也可以下载哦~附链接：jTemplates_0_8_4。
话不多说，直接贴代码哈~
页面html以及js代码：
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 <title>Index</title> 11 <script src="~/Scripts/jquery.js"></script> 12 <script src="~/Scripts/jquery-jtemplates.js"></script> 13 <script type="text/javascript"> 14 $(document).ready(function () { 15 16 debugger; 17 var val = $("#JsonInfos").val(); 18 var parVal = JSON.parse(val); 19 var data = { 20 TotalCount: 64, 21 Lists: parVal, 22 }; 23 // 设置模板 24 $("#result").setTemplateElement("templateContainer"); 25 //$("#result").setTemplate('<a href="#" onclick="foo({#var $T})">click me</a>'); 26 27 // 处理模板 28 $("#result").processTemplate(data); 29 30 $('.btnClick').on('click', function () { 31 var str = $(this).data('name'); 32 alert(str); 33 }); 34 }); 35 </script> 36 </head> 37 <body> 38 <input id="JsonInfos" type="text" value="@ViewBag.JsonInfos" style="display:none;" /> 39 <div id="result"> 40 </div> 41 <textarea id="templateContainer" style="display: none;"> 42 <table border="1"> 43 <tr> 44 <td> 45 姓名 46 </td> 47 <td> 48 年齡 49 </td> 50 <td> 51 时间 52 </td> 53 <td></td> 54 </tr> 55 {#if $T.Lists != null && $T.Lists.length > 0} 56 {#foreach $T.Lists as row} 57 <tr> 58 <td> 59 {$T.row.Name} 60 </td> 61 <td> 62 {$T.row.Age} 63 </td> 64 <td> 65 {$T.row.CreateDate} 66 </td> 67 <td> 68 <a href="#" class="btnClick" data-name="{$T.row.Name}">click me</a> 69 </td> 70 </tr> 71 {#/for} 72 @*{#for i = 0 to $T.Lists.length-1} 73 <tr> 74 <td> 75 {$T.Lists[$T.i].Name} 76 </td> 77 <td> 78 {$T.Lists[$T.i].Age} 79 </td> 80 <td> 81 {$T.Lists[$T.i].CreateDate} 82 </td> 83 </tr> 84 {#/for}*@ 85 {#else} 86 <tr><td colspan="3">暂无数据！！</td></tr> 87 {#/if} 88 89 </table> 90 </textarea> 91 </body> 92 </html>
后台控制器的代码：
1 using Newtonsoft.Json; 2 using System.Collections.Generic; 3 using System.Web.Mvc; 4 5 namespace jTemplateTest.Controllers 6 { 7 public class jTemplateTestController : Controller 8 { 9 // GET: jTemplateTest 10 public ActionResult Index() 11 { 12 List<Info> infos = new List<Info>() 13 { 14 new Info {Name = "Tomcat", Age = "10", CreateDate = "2017-08-03 10:34:37"}, 15 new Info {Name = "Jerry", Age = "35", CreateDate = "2017-08-03 10:34:37"}, 16 new Info {Name = "Mike", Age = "22", CreateDate = "2017-08-03 10:34:37"}, 17 new Info {Name = "Jim", Age = "54", CreateDate = "2017-08-03 10:34:37"}, 18 new Info {Name = "Merry", Age = "12", CreateDate = "2017-08-03 10:34:37"} 19 }; 20 ViewBag.JsonInfos = JsonConvert.SerializeObject(infos); 21 return View(); 22 } 23 } 24 25 public class Info 26 { 27 public string Name { get; set; } 28 public string Age { get; set; } 29 public string CreateDate { get; set; } 30 } 31 }
我这边数据是从后台传到前台，以json字符串格式传到后台，再接收赋值给data，也可以直接前台写入死数据。
这边引入了Newtonsoft.json的序列化方法，需要引用Newtonsoft.Json.dll(点击可下载)。
/******************************我是可爱的分割线******************************/
