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));
Jquery模板-----JsRender的更多相关文章
- 下一代Jquery模板-----JsRender
在ASP.NET MVC利用PagedList分页(二)PagedList+Ajax+JsRender中提到了JsRender.JsRedner和JsViews(JsViews是再JsRender基础 ...
- jQuery模板插件jsrender
前几天学习jqm+phonegap,用到了一个jquery插件jsrender,(由于app不能用asp.net的服务端控件了,所以我也是醉了...),用于循环展示一下数据. 下面是我用到的几个简单用 ...
- 10 个强大的JavaScript / jQuery 模板引擎推荐
模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易. 本文 ...
- jquery模板下载网站
jquery模板下载网站 http://www.jqshare.com/
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- jQuery 模板插件jquery-tmpl
Step1:导入脚本: <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")">&l ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- javascript/jquery模板引擎——Handlebars初体验
Handlebars.js下载地址:http://handlebarsjs.com/ 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分.其中有项功能是需要ajax调用后端接口,返回 ...
- JQuery模板插件-jquery.tmpl
转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...
随机推荐
- MySQL数据库优化的方式
1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...
- 电脑快捷键与JAVA关键字、运算符
电脑快捷键: Alt+ESC切换到上一个操作的窗口 Alt+F4关闭当前窗口 Print Screen截取当前全屏幕到剪切板 Alt+Print Screen截取当前窗口到剪切板 Alt+Shift在 ...
- 【转载】 深度学习总结：用pytorch做dropout和Batch Normalization时需要注意的地方，用tensorflow做dropout和BN时需要注意的地方,
原文地址: https://blog.csdn.net/weixin_40759186/article/details/87547795 ------------------------------- ...
- logminer使用测试库进行挖掘分析，10.2.0.5
上一篇测试是在dg环境进行测试挖掘,但是如果客户存在一个测试库,那样使用日志挖掘的影响性更小.本篇进行测试分析. 测试环境介绍: oracle linux 5.6,vmware虚拟机,安装两套单实例 ...
- Templates中的macro和include标签
1.macro标签 1.作用:相当于在模板中声名函数 2.使用方法: 语法:{% macro 名称(参数列表) %} xxx {% endmacro %} 创建 macro.html 模板文件 - ...
- JDK8 特性详解
Base64 对Base64编码的支持已经被加入到Java 8官方库中,这样不需要使用第三方库就可以进行Base64编码,例子代码如下: package com.cn.yunliu.jdk8; imp ...
- Node.js内置的文件系统模块（fs）
异步读取文件 按照js的标准,异步读取一个文本文件的格式如下: 'use strict' const fs = require('fs') fs.readFile('test.txt', 'utf-8 ...
- HDU 2561
F - 第二第二 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Prac ...
- CodeForces 4A
A A - Water~melon Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit St ...
- Python逻辑运算
一.运算符种类 1.比较运算符 > ,< , >= ,<= , != , == 2.赋值运算符 =, +=,-=,*=,/=,**=,%= 3.成员运算符 in not in ...