JavaScript页面模板库handlebars的简单用法
Handlebars是一个JavaScript页面模板库,帮助你轻松的构建语义化模板。
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>handlebars</title> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="thisismypage"> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <scriptsrc="${base}/js/jquery1.11.min.js"></script> <scriptsrc="${base}/js/handlebars-v3.0.0.js"></script> </head> <body> <divid=ttstyle='display:none'> <divclass="entry"> <h1>{{title}}</h1> <divclass="body">{{body}}</div> </div> </div> </body> <scripttype="text/javascript"> //$('#tt').before('<scriptid="temp"type="sfd">'); //$('#tt').after("</script>");// varsource=$("#tt").html(); //alert(source); vartemplate=Handlebars.compile(source); vardata={title:"MyNewPost",body:"Thisismyfirstpost!" }; varresult=template(data);//将数据填充到模板 console.log(result); $('#tt').before(result); </script> </html>
示例很简单,具体详情可参考ThinkVitamin的文章