Jquery模板-----JsRender

重新排版与堂堂88

先看下简单示例：

<script type="type='text/html'" id="jianren">
              <div class="wrap">
                <div class="recommend"> <a class="banner" href=""><img src="{theme:img/<%=cateid%>.jpg}" class="ui-fb" alt=""></a>
                  <div class="brand">
                <div class="list" >
                   <% for (var i = ; i < category.length; i ++) { %>　　　　　　//使用for循环
                       <a href="{url:/site/pro_list/brand/<%=category[i].id%>/cat/<%=cateid%>}"><%=category[i].name%></a>　　//输出
                   <%}%>
                  </div>
                </div>
                <div class="list" >
<% for (var i = ; i < list.length; i ++) { %>
        <div class="item"  >
                 <a href="<%=list[i].goods.url%>" class="good">
                    <div class="img"> <img class="ui-fb" src="<%=list[i].goods.img%>"> </div>
                    <div class="summary">
                      <div class="selling"> <span><%=list[i].goods.sale%>人已购买</span> </div>
                      <h2><%=list[i].goods.name%></h2>
                      <div class="adds">
                        <div class="prices">
                          <p class="o-price"><i class="ui-yen">￥</i><del><%=list[i].goods.market_price%></del></p>
                          <p class="price"><i class="ui-yen">￥</i><b><%=list[i].goods.sell_price%></b></p>
                        </div>
                      </div>
                      <button class="ui-cart"  src="<%=list[i].goods.url%>"></button>
                    </div>
                    </a>
                    <a class="category" href="{url:/site/pro_list/cat/<%=list[i].goods.id%>}"><%=list[i].goods.catename%></a>
          </div>
    <% } %>
    </div>
</script>

插入：

<script type="text/javascript">
  $('#rscrolleRect li').click(function(){//获取数据
        $.post('{url:/site/getcategoryjson}',{'id':cartId},function(data){
            if(data){
var datas = data;
             var addressLiHtml = template('jianren',datas);
           //  alert(addressLiHtml);
             $('.pannel').eq(clickcur).html(addressLiHtml);
            //  alert(addressLiHtml);
            }
        },'json');　　　　//别特麻痹的忘了JSON
  })
</script>

data数据：（课外知识....）json数据:

{
    "list": [
        {
            "goods": {
                "sale": "22",
                "name": "西红柿",
                "market_price": "0.00",
                "sell_price": "2.98",
                "url": "/index.php?cond=1033",
                "img": "upload/2014/12/0jpg",
                "id": "56",
                "catename": "花果"
            }
        },
        {
            "goods": {
                "sale": "31",
                "name": "大土豆",
                "market_price": "0.00",
                "sell_price": "2.68",
                "url": "/index.php?cid=1036",
                "img": "upload/2014/121054567.jpg",
                "id": "55",
                "catename": "根茎"
            }
        },
        {
            "goods": {
                "sale": "71",
                "name": "大白菜",
                "market_price": "0.00",
                "sell_price": "1.58",
                "url": "/index.php?con&id=1038",
                "img": "upload/2014042143313.jpg",
                "id": "54",
                "catename": "叶菜"
            }
        },
        {
            "goods": {
                "sale": "7",
                "name": "有机菜花",
                "market_price": "0.00",
                "sell_price": "4.98",
                "url": "/index.php?controle&actits&id=1039",
                "img": "upload/2014/12/9042832888.jpg",
                "id": "56",
                "catename": "花果"
            }
        },
        {
            "goods": {
                "sale": "13",
                "name": "西葫芦",
                "market_price": "0.00",
                "sell_price": "1.68",
                "url": "/index.php?controller=site&action=products&id=1041",
                "img": "upload/2014/12/09043237452.jpg",
                "id": "56",
                "catename": "花果"
            }
        },
        {
            "goods": {
                "sale": "6",
                "name": "净藕",
                "market_price": "0.00",
                "sell_price": "3.98",
                "url": "/index.php?coucts&id=1043",
                "img": "upload/2014/044128578.jpg",
                "id": "55",
                "catename": "根茎"
            }
        },
        {
            "goods": {
                "sale": "1",
                "name": "姜",
                "market_price": "0.00",
                "sell_price": "4.98",
                "url": "/index.php?controlle=products&id=1044",
                "img": "upload/2014/12/09/20141209044441656.jpg",
                "id": "55",
                "catename": "根茎"
            }
        },
        {
            "goods": {
                "sale": "6",
                "name": "黄瓜",
                "market_price": "0.00",
                "sell_price": "2.38",
                "url": "/index.php?contrroducts&id=1045",
                "img": "upload/20045058992.jpg",
                "id": "56",
                "catename": "花果"
            }
        },
        {
            "goods": {
                "sale": "5",
                "name": "500g",
                "market_price": "0.00",
                "sell_price": "0.98",
                "url": "/index.php?controon=products&id=1048",
                "img": "upload/2014/12/09/20141209045623798.jpg",
                "id": "54",
                "catename": "叶菜"
            }
        },
        {
            "goods": {
                "sale": "13",
                "name": "500g",
                "market_price": "0.00",
                "sell_price": "3.68",
                "url": "/index.php?controller=site&action=products&id=1049",
                "img": "upload/2014/12/09/20141209050100564.jpg",
                "id": "56",
                "catename": "花果"
            }
        },
        {
            "goods": {
                "sale": "3",
                "name": "500g",
                "market_price": "0.00",
                "sell_price": "4.98",
                "url": "/index.php?controloducts&id=1050",
                "img": "upload/2014/12/10/20141210082407662.jpg",
                "id": "56",
                "catename": "花果"
            }
        },
        {
            "goods": {
                "sale": "16",
                "name": "胡500g",
                "market_price": "0.00",
                "sell_price": "0.98",
                "url": "/index.php?controucts&id=1051",
                "img": "upload/2014/12jpg",
                "id": "55",
                "catename": "根茎"
            }
        },
        {
            "goods": {
                "sale": "11",
                "name": "小500g",
                "market_price": "0.00",
                "sell_price": "1.98",
                "url": "/index.php?controlproducts&id=1052",
                "img": "upload/2014/12988.jpg",
                "id": "55",
                "catename": "根茎"
            }
        },
        {
            "goods": {
                "sale": "12",
                "name": "砀500g",
                "market_price": "0.00",
                "sell_price": "2.98",
                "url": "/index.php?controllcts&id=1054",
                "img": "upload/2014/12/10/268.jpg",
                "id": "61",
                "catename": "梨类"
            }
        },
        {
            "goods": {
                "sale": "2",
                "name": "面500g",
                "market_price": "0.00",
                "sell_price": "5.28",
                "url": "/index.php?controllerducts&id=1055",
                "img": "upload/2014/12/137.jpg",
                "id": "55",
                "catename": "根茎"
            }
        },
        {
            "goods": {
                "sale": "11",
                "name": "500g",
                "market_price": "0.00",
                "sell_price": "1.50",
                "url": "/index.php?controproducts&id=1057",
                "img": "upload/2014/12/10/20141210085912276.jpg",
                "id": "58",
                "catename": "调味"
            }
        },
        {
            "goods": {
                "sale": "21",
                "name": "福建500g",
                "market_price": "0.00",
                "sell_price": "3.98",
                "url": "/index.php?controlleion=products&id=1058",
                "img": "upload/2014/90.jpg",
                "id": "48",
                "catename": "新鲜水果"
            }
        },
        {
            "goods": {
                "sale": "17",
                "name": "水500g",
                "market_price": "0.00",
                "sell_price": "0.98",
                "url": "/index.php?controller=site&actid=1060",
                "img": "upload/2014/12/10/20141210092738197.jpg",
                "id": "55",
                "catename": "根茎"
            }
        },
        {
            "goods": {
                "sale": "2",
                "name": "杏菇500g",
                "market_price": "0.00",
                "sell_price": "3.98",
                "url": "/index.php?controller=site&action=p062",
                "img": "upload/2014/12/10jpg",
                "id": "57",
                "catename": "菇菌"
            }
        },
        {
            "goods": {
                "sale": "0",
                "name": "腿500g",
                "market_price": "0.00",
                "sell_price": "10.80",
                "url": "/index.php?controlid=1065",
                "img": "upload/2014/12/10/20141210095526338.jpg",
                "id": "68",
                "catename": "禽类"
            }
        }
    ],
    "cateid": "39",　　　　　　//   这里直接调用 <%=cateid%>
    "category": [　　　　　　　//   这里可以使用for 循环
        {　　　　　　　　　　　 //   <%for(var i= 0;i<category.length;i++){%>
            "id": "20",　　　 //         <%=category[i].id%>  上面goods的形式 <%=category[i].goods.id%>
            "name": "湖"　　　//   <%}%>
        },
        {
            "id": "81",
            "name": ""
        },
        {
            "id": "82",
            "name": ""
        },
        {
            "id": "83",
            "name": ""
        }
    ]
}

1.这些是别人的经验看不懂。。。。也烦躁  不愿意看 ，烦   烦呀   谁爱看谁看去吧

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