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

在ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender中提到了JsRender。JsRedner和JsViews（JsViews是再JsRender基础上的进一步封装）被称为下一代的Jquery模板，官方地址：https://github.com/BorisMoore/jsrender;https://github.com/BorisMoore/jsviews。Juqrey模板是一个javascript引擎（抄的、这个东东过高深了），他最直接的做用就是:一、代码重用，减小代码量;（貌似还更容易编写）二、抛弃繁琐的字符串拼接、提升代码可见性、简化维护。

　　为何须要模板

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

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的例子：
复制代码

//Templates
<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等字符复杂字符，貌似更容易编写了。

　　JsRender和Jquery Template

　　既然JsRender是下一代Jquery模板,那么谁是上一代模板呢？Jquery Template。Jquery Template的特色这里就不废话了，说说JsRedner和Jquery Template的差距：

　　　　一、JsRender渲染很是快，网上说的是“和最快同样快”（固然我也不知道他到底有多快）。对于简单的模板的渲染，JsRender的渲染速度比Js Template能够快20倍。

　　　　二、JsRender对Dom和Jquery不存在任何依赖（注:不依赖并非说不使用...）。在Jquery Template 必须用$.template(name,'XXX')标记模板，而后渲染。JsRedner不用，他甚至能够直接渲染字符串。

　　　　三、JsRender和Jquery Template相比，JsRender仅仅须要更少的代码，2就是一个例子。

　　JsRender三要素和行为

　　从上面贴的代码能够看出，JsRender须要三要素：模板（Template）、容器（Container：简单。。。）、数据（Data：数据可使各类js对象：如数组，object等等）。主要行为为：渲染模板、将渲染结果插入容器（这个太简单了）。说下渲染模板先。。。

　　JsRender渲染模板

　　一、无需编译直接渲染：　

var html = $("#XXXXX").render(data); // XXX表明某个脚本标记，也就是上面的<script id="XXX" type="text/x-jsrender">.......</script>

　　二、渲染前编译：
复制代码

/*A、获取模板对象的方式编译*/
var xxxTemplate = $.templates("#xxxTemplate");//既能够是字符串也能够是脚本标记，B是字符串
var html = xxxTemplate.render(data);
/*B、指定模板名称的方式编译*/
$.templates('xxx','<b>{{:name}}</b>');
$.templates({
　　'yyy','<b>{{:name}}</b>',
　　'zzz','<b>{{:name}}</b>'
})；
var html = $.render.xxx(data);//注意，第B种方式能够同时渲染多个模板，可是第A种方式不行

复制代码

 　　总结一下能够看出：一、无编译直接渲染的方式没法用于字符串的渲染；渲染前编译的方式字符串和脚本标记皆可。二、制定模板名称的方式编译能够同时编译多个模板，可是获取模板对象的方式编译只能编译一个模板。

　　JsRender模板（Template）

　　基本的jsRender标签：JsRender模板主要由html标记和jsrender标签（像上面的{{：XXX}}）组成。全部的Jsrender标签都被两个大括号包裹，中间既能够是参数也可使表达式（如：{{：#index}}和{{：#index+1}}），下面看一下一些基本的Jsrender标签。
描述     例子     输出
参数firstName的值（未被Html编码）     {{:firstName}}     Madelyn
参数movie的属性--releaseYear的值（未被html编码）     {{:movie.releaseYear}}     1987
比较（表达式,未被html编码）     {{:movie.releaseYear < 2000}}     true
经html编码的值（更加安全，可是要耗点内存）     {{>movie.name}}     Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span>
经html编码的值     {{html:movie.name}}     Star Wars: Episode VI: <span style='color:purple;font-style: italic;'>Return of the Jedi</span>

 

 　　jsrender数据遍历：看过ASP.NET MVC利用PagedList分页（二）PagedList+Ajax+JsRender的童鞋对jsrender的数据遍历相信不会陌生，基本语法以下：

{{for xxx}}
    <li>{{:property of xxx}}</li>
{{/for}}

 　　有时候想获取xxx自己怎么办呢？以下：

{{for  xxx yyy}}
    <li>{{:#data}}</li>
{{/for}}

　　上面的例子要说明两点：一、for不只仅能够遍历一组数据，他甚至能够同时遍历两组和多组数据（强大了吧...）。二、上面的#data就表示xxx和yyy本生。试想一下，如何xxx和yyy都表示一个基本元素（字符串、整数等等、任意交叉）的数组，那么这个是否是能很好的完成遍历呢？说道#data，不得不提一下#index，#data和#index都是内置的jsrender关键字。下面在一个例子：
复制代码

//Template
{{for #data}}
        <h3>{{:name}}</h3>
        <ul>
        {{for language}}
             <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
        {{/for}}
        </ul>
{{/for}}
//Data
 var studnets = [
        {
            "name": "Mingjun Tang",
            "language": [{ "title": "English"},{ "title": "Franch"}]
        },
        {
            "name": "Ming Tang",
            "language": [{ "title": "English"}]
        }
];

复制代码

 　　遍历时#data充当了students,同时#parent.parent.data.XXX能够用于向上迭代。注意这里的data并非student中的属性额，由于#parent向上迭代后返回的是一个jsrender对象只有，#parent.data后才会返回数组内容。#parent在jsrender叫路径访问，可是我以为这里叫向上迭代还要好些。

　　jsrender条件：
复制代码

{{if  fullprice}}
    html markup
{{else halfprice}}
    html markup
{{else}}
    html markup
{{/if}}

复制代码

  　也能够吧他们扯开用,如：{{if fullprice}}html markup{{/if}}和{{if fullprice}}html markup{{else}}html markup{{/if}}。可是这里须要注意两点：

　　一、if....else....else表示了if elseif else，这里的else表示了elseif。

　　二、{{if  fullprice}}中的fullprice条件表达式表示的是fullprice不为空。其实还能够有更懂的条件表达式能够应用到这里来，以下（注意这里的等于和不等于、、、、）：
表达式     举例     注释
||     {{ :a || b }}     或
&&     {{ :a && b }}     且
!     {{ :!a }}     非
<= 和>=和 <和 >     {{ :a <= b }}     比较
=== 和 !==     {{ :a === b }}     等于和不等于

　　三、在条件表达式中还能够用一些属性进行比较，如{{if  xxx.length > 50}}等等

　　jsrender模板嵌套：

 　  在上面一个例子中，嵌套了两个for循环，试想一下，若是这两个for循环结构很是复杂或其下还要嵌套一个甚至多个for循环的时候，上面所说的jsrender提升了代码的可见性和可维护性就不复存在了。因而jsrender也提供了jsrender模板的嵌套，改写一下上上面的JsRender模板：
复制代码

<script type="text/x-jsrender" id="studentTemplate">
    {{for #data}}
        <h3>{{:name}}</h3>
        <ul>
        {{for language tmpl="#studentLanguageTemplate" /}}
        </ul>
    {{/for}}
</script>

<script type="text/x-jsrender" id="studentLanguageTemplate">
    <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
</script>
//render
$("#studentList").html($("#studentTemplate").render(studnets));

复制代码

 　　这样就能够避免无限的嵌套下去，只须要设置{{for}}的tmpl属性便可。这时，tmpl是一个脚本标记。若是studentLanguageTemplate已经被$.templates()编译，那么也能够这么写：
复制代码

<script type="text/x-jsrender" id="studentTemplate">
    {{for #data}}
        <h3>{{:name}}</h3>
        <ul>
        {{for language tmpl="studentLanguageTemplate" /}}
        </ul>
    {{/for}}
</script>

<script type="text/x-jsrender" id="studentLanguageTemplate">
    <li> {{:#parent.parent.data.name}} is learning {{:title}}</li>
</script>
//render
$.templates("studentLanguageTemplate", "#studentLanguageTemplate");
$("#studentList").html($("#studentTemplate").render(studnets));

复制代码

　　上面的templ再也不“#XXX”指向一个脚本标记，而是"XXX"指向一个已经标记的脚本标记。（哈哈 提及来还真绕口）。

　　OK，基础的东东就差很少了。不过除了着了，Jsrender还具有良好的可扩展性。后头在慢慢来看看。。。。。

　　补充:

　　有些朋友在问jsrender如今是否适合用于项目，看官网介绍：

　　Warning: JsRender is close to beta, but not yet officially beta, so there may still be changes to APIs and features in the coming period.

　　jsrender虽然接近测试版，可是还不是正式的测试版。因此它的API或一些功能可能仍是会有改动。也就是说jsrender的稳定性可能还不是十分肯定，因此若是正式的项目仍是建议你们使用Jquery Template。