下一代Jquery模板-----JsRender

官方：http://www.jsviews.com/
原文：http://www.cnblogs.com/tangmingjun/archive/2012/06/04/2534605.html
JsRedner和JsViews（JsViews是再JsRender基础上的进一步封装）被称为下一代的Jquery模板，官方地址：https://github.com/BorisMoore/jsrender;https://github.com/BorisMoore/jsviews。Juqrey模板是一个javascript引擎（抄的、这个东东太高深了），他最直接的作用就是:1、代码重用，减少代码量;（貌似还更容易编写）2、抛弃繁琐的字符串拼接、提高代码可见性、简化维护。

　　为什么需要模板

　　总之，我是写过无数这样蛋疼的代码：

复制代码

var html = '';
$.each(data.persons, function (i, item) {
     html += "<tr><td>" + item.FirstName + "</td><td><a href='/Person/Edit/"
　　　　　　　　+ item.PersonID + "'>Edit</a> | <a href='/Person/Details/" 
　　　　　　　　+ item.PersonID + "'>Details</a> | <a href='/Person/Delete/" 
　　　　　　　　+ item.PersonID + "'>Delete</a></td></tr>";
});
$('#XXX').append(html); 

　　如果觉得这样还是不明显，可以参见ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender中的第四部分，这样写很明显的坏处就是：这样的代码可见性太低，很难维护。或许你几个月之后再来看你的代码，你要花半个小时甚至更多才能得出代码的展示结构。下面来看个JsRender的例子：

<script type="text/x-jsrender" id="personListTemplate">
    {{for persons}}
        <tr>
            <td>{{:FirstName}}</td>
            <td>
                <a href="/Person/Edit/{{:PersonID}}">Edit</a> | 
                <a href="/Person/Details/{{:PersonID}}">Details</a> | 
                <a href="/Person/Delete/{{:PersonID}}">Delete</a>
            </td>
        </tr>
    {{/for}}
</script>
//Render Data
var html  = $("#personListTemplate").render(data);
//Insert into Container
$("#XXX").append(html); 

　　代码的结构确实清晰可见了，但是代码越看越多了。首先，这是错觉,因为这里的东东都是严格换行了的。其次，这里省去了item、each等字符复杂字符，貌似更容易编写了。
.......
......
更多详细介绍见上面的连接