如何用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字符串,况且这只是一个极其简单的例子,如果标签之间的嵌套、属性复杂的话,这种方式写起来相当的麻烦,且标签间没有层次结构,可读性和维护性极差。
