mustache小結

3501 ワード

mustacheで書かれた項目に出会って、使いやすい感じで、ネットで調べてみると干物が多くないので、自分でまとめました.
以下にいくつかの例を示します.参照した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}}