官方:[url]http://www.jsviews.com/[/url]
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等字符复杂字符,貌似更容易编写了。
.......
......
更多详细介绍见上面的连接