mustache小結
3501 ワード
mustacheで書かれた項目に出会って、使いやすい感じで、ネットで調べてみると干物が多くないので、自分でまとめました.
以下にいくつかの例を示します.参照したjs、ダウンロード場所、jqueryはすべてあるはずです.mustacheのダウンロード場所を貼ってください.https://github.com/janl/mustache.js
以下にいくつかの例を示します.参照したjs、ダウンロード場所、jqueryはすべてあるはずです.mustacheのダウンロード場所を貼ってください.https://github.com/janl/mustache.js
$(function(){
var tmple = $('#tmple').html();
Mustache.parse(tmple);
//
var data={"name":" "}
var rendered = Mustache.render(tmple, data);
$("#tmpleHtml").html(rendered);
//
data=[
{"name":" ",
"age":"18",
"sex":" "},
{"name":" ",
"age":"19",
"sex":" "},
{"name":" ",
"age":"20",
"sex":" "},
]
var rendered = Mustache.render(tmple, {list:data});
$("#tmpleHtml").html(rendered);
//
data=[
{
"id":1,
"name":" ",
"age":"18",
"sex":" ",
"friends":[{
"name":" ",
"age":"18",
"sex":" ",
},{
"name":" ",
"age":"18",
"sex":" ",
}]},
{
"id":2,
"name":" ",
"age":"19",
"sex":" ",
"friends":[{
"name":" ",
"age":"18",
"sex":" ",
}]},
{
"id":3,
"name":" ",
"age":"20",
"sex":" ",
"friends":[{
"name":" ",
"age":"18",
"sex":" ",
}]},
]
var rendered = Mustache.render(tmple, {list:data});
$("#tmpleHtml").html(rendered);
var friends = $('#friends').html();
for(var i=0;i
Mustache
<div>{{name}}<div>
<div>-------- ---------</div>
{{#list}}
<div>
:{{name}}
</div>
<div>
:{{age}}
</div>
<div>
:{{sex}}
</div>
{{/list}}
<div>-------- ---------</div>
{{#list}}
<div>
:{{name}}
</div>
<div>
:{{age}}
</div>
<div>
:{{sex}}--> :{{{formatSex}}}
</div>
<div>
:<div id="people_{{id}}" style="margin-left:20px">
</div>
</div>
{{/list}}
{{#friends}}
<div>
:{{name}}
</div>
<div>
:{{age}}
</div>
<div>
:{{sex}}
</div>
{{/friends}}