采用http://www.css88.com/doc/underscore/ ， 以模板形式传输到页面
数组对象（Array Json）
官方示例
例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <script src="./jquery.min.js" type="text/javascript"></script>
9 <script src="./underscore-min.js" type="text/javascript"></script>
10 <title>Document</title>
11 <style>
12 .header {
13 width: 980px;
14 height: 100px;
15 margin: 0 auto;
16 background-color: #ccc;
17 }
18
19 .content {
20 width: 980px;
21 margin: 0 auto;
22 background-color: #ccc;
23 }
24
25 .main {
26 float: left;
27 margin-top: 20px;
28 margin-right: 18px;
29 border-right: 1px solid #f00;
30 }
31
32 .main h1 {
33 text-align: center;
34 }
35
36 .aside {
37 float: right;
38 width: 300px;
39 height: 400px;
40 background-color: #ccc;
41 }
42 </style>
43 </head>
44
45 <body>
46 <div class="header">
47 <div class="content">
48
49
50 <div class="mains">
51
52 </div>
53
54 <script type="text/template" id="template">
55 <div class="main">
56 <h1>
57 <%=title%>
58 </h1>
59 <p>
60 <%=time%>
61 <%=author%>
62 </p>
63 <p>
64 <%=content%>
65 </p>
66 <p>
67 <%=content%>
68 </p>
69 <p>
70 <%=content%>
71 </p>
72 <p>
73 <%=content%>
74 </p>
75 <p>
76 <%=content%>
77 </p>
78 <p>
79 <%=content%>
80 </p>
81 <p>
82 <%=content%>
83 </p>
84 <p>
85 <%=content%>
86 </p>
87 </div>
88 </script>
89 <div class="aside"></div>
90 </div>
91 <script>
92 // get template
93 var template = $('#template').html();
94 var compiled = _.template(template);
95
96 // 模拟后端调用数据库数据
97 var data = [
98 {
99 title: '1号新闻,!!!!很嗨皮',
100 time: '2018年8月12日 早上9点21分03秒',
101 author: 'Wj1',
102 content: 'AngularJs Frames from U.S!~~'
103 },
104 {
105 title: '2号新闻,!!!!很嗨皮',
106 time: '2018年8月13日 早上9点22分03秒',
107 author: 'Wj2',
108 content: 'AngularJs Frames from U.S!~~'
109 },
110 {
111 title: '3号新闻,!!!!很嗨皮',
112 time: '2018年8月14日 早上9点23分03秒',
113 author: 'Wj3',
114 content: 'AngularJs Frames from U.S!~~'
115 },
116 {
117 title: '4号新闻,!!!!很嗨皮',
118 time: '2018年8月15日 早上9点24分03秒',
119 author: 'Wj4',
120 content: 'AngularJs Frames from U.S!~~'
121 },
122 {
123 title: '5号新闻,!!!!很嗨皮',
124 time: '2018年8月16日 早上9点25分03秒',
125 author: 'Wj5',
126 content: 'AngularJs Frames from U.S!~~'
127 },
128 {
129 title: '6号新闻,!!!!很嗨皮',
130 time: '2018年8月16日 早上9点25分03秒',
131 author: 'Wj6',
132 content: 'AngularJs Frames from U.S!~~ 666'
133 },
134 ]
135
136
137 for (var i in data) {
138 var compiledString = compiled(data[i]);
139 $('.mains').append($(compiledString));
140 }
141
142 // $.get('/news', function (data, status) {
143 // for (var i in data) {
144 // var compiledString = compiled(data[i]);
145 // $('.mains').append($(compiledString));
146 // }
147 // })
148 </script>
149 </body>
150
151 </html>