微信公众号

采用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>