0
点赞
收藏
分享

微信扫一扫

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


官方:[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等字符复杂字符,貌似更容易编写了。


.......


......


更多详细介绍见上面的连接


举报

相关推荐

0 条评论