Jquery模板-----JsRender

浏览数：18 / 时间：2015年06月09日

重新排版与堂堂88

先看下简单示例：

//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);　　//data数据没测试
//Insert into Container
$("#XXX").append(html);

JsRender三要素和行为

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

JsRender渲染模板

　　1、无需编译直接渲染：

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

　　2、渲染前编译：

/*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标签

描述	例子	输出
参数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数据遍历

//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}}

表达式	举例	注释
\|\|	{{ :a \|\| b }}	或
&&	{{ :a && b }}	且
!	{{ :!a }}	非
<= 和>=和 <和 >	{{ :a <= b }}	比较
=== 和 !==	{{ :a === b }}	等于和不等于

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));