juicer html拼接,html本地存储对像以及模板juicer插件的使用

测试

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

border-spacing: 0;

}

tr td {

border-bottom: 1px solid #999;

border-right: 1px solid #999;

padding: 10px 30px;

}

function renderToHtml(data){

var tpl = document.getElementById('tp1').innerHTML;

var html = juicer(tpl, data);

//alert(html);

jQuery("#content").html(html);

}

window.οnlοad=function(){

var indexOf = function getValueByIndex(arr,index){

if(arr.length

return "null";

}else{

return arr[index];

}

}

juicer.register('indexOf', indexOf);

write();

}

function read(){

var sj=localStorage.getItem("data");

//alert(data);

var data = $.parseJSON(sj);

renderToHtml(data);

}

function write(){

localStorage.clear();

var xslb=new Array();

var xs1=new Object();

xs1.no=1;

xs1.name="高富帅";

xs1.age=19;

xslb.push(xs1)

var cj=new Array();

var yw=new Object();

yw.no=1;

yw.name="语文";

yw.score=88;

cj.push(yw);

var sx=new Object();

sx.no=3;

sx.name="数学";

sx.score=99;

cj.push(sx);

var xs2=new Object();

xs2.no=2;

xs2.name="白富美";

xs2.age=16;

xs2.cj=cj;

xslb.push(xs2)

var xx=new Object();

xx.name="北京大学";

xx.address="北京市朝阳区";

var data=new Object();

var cs=new Array();

cs.push("1");

cs.push("2");

cs.push("3");

data.xslb=xslb;

data.xx=xx;

data.cs=cs;

data.total=20;

var sj = $.toJSON(data);

//alert(sj);

localStorage.setItem("data",sj);

renderToHtml(data);

}

学校人数:${total}  学校名称: ${xx.name}

{@each cs as it,index}

-----------------------------${cs, index | indexOf}

{@/each}

{@each xslb as it,index}

学号 ${it.no}姓名${it.name}年龄 ${it.age}成绩

{@each it.cj as it2,index}

行号:${index}

---

名次:${it2.no}

---

姓名:${it2.name}

---

成绩:${it2.score}

算术运算:${+it2.score/100}

索引为字符串:${index+1}

索引为数字:${+index+1}

{@/each}

{@/each}

{

"xslb": [{

"no": 1,

"name": "高富帅",

"age": 19

},

{

"no": 2,

"name": "白富美",

"age": 16,

"cj": [{

"no": 1,

"name": "语文",

"score": 88

},

{

"no": 3,

"name": "数学",

"score": 99

}]

}],

"xx": {

"name": "北京大学",

"address": "北京市朝阳区"

},

"cs": ["1",

"2",

"3"],

"total": 20

}