如何用Handlebars模板引擎实现疑问?

摘要:Handlebars.js下载地址:http:handlebarsjs.com 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分。其中有项功能是需要ajax调用后端接口,返回json数据后要动态的插入数据。但是一开
Handlebars.js下载地址:http://handlebarsjs.com/ 最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分。其中有项功能是需要ajax调用后端接口,返回json数据后要动态的插入数据。但是一开始我自己是用最"传统"的通过js拼接html字符串,然后再用jq插入到页面中的方式。比如说下面的这个例子,我要显示一个个人信息卡: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Index</title> 6 <script src="js/jquery.js"></script> 7 <style> 8 .person { 9 font-size:40px; 10 float:left; 11 padding:20px; 12 margin:30px; 13 background-color:pink; 14 } 15 </style> 16 </head> 17 18 <body> 19 <div class = "person" id="person_info"> 20 </div> 21 </body> 22 23 <script> 24 var data = { 25 name:'约翰莫里森', 26 home:'美国', 27 job:'摔跤手' 28 }; 29 30 var str = ""; 31 str += "<div>姓名:" + data.name + "</div>"; 32 str += "<div>出生地:" + data.home + "</div>"; 33 str += "<div>职业:" + data.job + "</div>"; 34 35 $('#person_info').html(str); 36 </script> 37 </html> 这里我得用自己"手动"拼接html字符串,况且这只是一个极其简单的例子,如果标签之间的嵌套、属性复杂的话,这种方式写起来相当的麻烦,且标签间没有层次结构,可读性和维护性极差。
阅读全文