需要下载Mustache.js的快速通道:
https://github.com/janl/mustache.js
里面还有demo可以学习,
不过是英文文档,
英语不好的还是看我的吧
直接上代码了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/mustache.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="alldiv1"></div>
<hr />
<div class="alldiv2"></div>
<hr />
<div class="alldiv3"></div>
<hr />
<div class="alldiv4"></div>
<hr />
<div class="alldiv5"></div>
<hr />
<div class="alldiv6"></div>
<hr />
<div class="alldiv7"></div>
<hr />
<div class="alldiv8"></div>
<hr />
<div class="alldiv9"></div>
<script type="text/javascript">
//Mustache.render(template,data);
//{{prop}}常规输出
var data = {a1:"我",a2:"爱",a3:"悦悦"};
var template = "<p>{{a1}}</p><p>{{a2}}</p><p>{{a3}}</p>";
var view = Mustache.render(template,data);
$(".alldiv1").html(view);
//{{#prop}}内容{{/prop}} if else判断
var data = {prop:function(){
return true;
}};
var template = "<p>{{#prop}}我爱悦悦{{/prop}}</p>";
var view = Mustache.render(template,data);
$(".alldiv2").html(view);
//{{#prop}}{{name}}{{/prop}}for each循环,基础版
//json数组对象写法;
var data = {talk:[{"tel":"我"},{"tel":"爱"},{"tel":"你"},{"tel":"悦悦"}]};
var template = "<p>{{#talk}}<h1>{{tel}}</h1>{{/talk}}</p>";
var view = Mustache.render(template,data);
$(".alldiv3").html(view);
//{{#prop}}{{name}}{{/prop}}函数返回值数组写法
//函数返回值数组写法,基础版
// var data ={talk:function(){
// return [{"tel":"我"},{"tel":"爱"},{"tel":"你"},{"tel":"悦悦"}];
// }};
//或者更形象一点的例子,进阶版
var data ={talk:[
{"tel":"我","pt":"I"},
{"tel":"爱","pt":"LOVE"},
{"tel":"你","pt":"YOU"},
{"tel":"悦悦","pt":"yueyue"}
],
mushroom:function(){
var self = this;
return self.tel +"["+ self.pt+"]";
}};
var template = "<p>{{#talk}}<h1>{{mushroom}}</h1>{{/talk}}</p>";
var view = Mustache.render(template,data);
$(".alldiv4").html(view);
//{#prop}{{.}}{/prop}如果是由对象组成的数组
//如果是由对象组成的数组
var data = {talk:["悦悦","我","爱","你"]};
var template = "<p>{{#talk}}<h1>{{.}}</h1>{{/talk}}</p>";
var view = Mustache.render(template,data);
$(".alldiv5").html(view);
//动态渲染,根据实际情况看,只能渲染{{#prop}}内容{{/prop}}这一层,可以将prop替换成想要的标签,并保留其标签内的内容
var data = {
talk:function(){
return function(text,render){
return "<b>"+render(text)+"</b>"
};
}
}
var template = "{{#talk}}<h1>动态渲染~~</h1>{{/talk}}";
var view = Mustache.render(template,data);
$(".alldiv6").html(view);
//{{^prop}}内容{{/prop}} if else判断,与#相反,如果是否定的才能显示
var data = {prop:function(){
return false;
}};
var template = "<p>{{^prop}}我爱悦悦{{/prop}}</p>";
var view = Mustache.render(template,data);
$(".alldiv7").html(view);
//渲染上下文
var data = {
pt:"love",
wwprop:{
bbc:"222",
wprop:{
bbq:"123",
prop:{
talk:"JUST"
}
}
}
}
var template = "{{#wwprop}}{{#wprop}}{{bbq}}~{{#prop}}{{bbc}}~{{talk}}~{{pt}}{{/prop}}{{/wprop}}{{/wwprop}}";
var view = Mustache.render(template,data);
$(".alldiv8").html(view);
//方法里可再次执行变量中的表达式[一直是失败的不知道原因]
var data = {
name:"年龄"+"{{age}}",
agea:function(){
return function(text,render){
console.log(text);
return "<b>"+render(text)+"</b>";
}
},
age:"18"
};
var template = "{{#agea}}HI~{{name}}{{/agea}}";
var view = Mustache.render(template,data);
$(".alldiv9").html(view);
// 输出结果：
//
// Hi {{age}}Tater.
// <b>Hi 18Tater.</b>
// 9.{{^}}与{{#}}相反，如果变量是null、undefined、 false、和空数组讲输出结果
//
// 10.{{! }}注释
</script>
</body>
</html>
网友评论