1 | <!DOCTYPE HTML>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>MOCK FOR HANDLEBARS</title>
|
6 | <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
|
7 | <link href="../node_modules/codemirror/lib/codemirror.css" rel="stylesheet">
|
8 | <link href="../node_modules/codemirror/theme/neat.css" rel="stylesheet">
|
9 | <link href="assets/mock.css" rel="stylesheet">
|
10 | </head>
|
11 | <body>
|
12 | <nav class="navbar navbar-default" role="navigation">
|
13 | <div class="navbar-header">
|
14 | <a class="navbar-brand" href="http://mockjs.com">Mock.js</a>
|
15 | </div>
|
16 | <div class="collapse navbar-collapse navbar-ex1-collapse">
|
17 | <ul class="nav navbar-nav">
|
18 | <li class=""><a href="./mock.html">Data</a></li>
|
19 | <li class="active"><a href="./mock4tpl.html">Handlebars & Mustache</a></li>
|
20 | <li class=""><a href="./mock4xtpl.html">KISS XTemplate</a></li>
|
21 | <li class=""><a href="https://github.com/nuysoft/Mock">Github</a></li>
|
22 | </ul>
|
23 | <ul class="nav navbar-nav navbar-right">
|
24 | <li><a id="save" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-ok-sign"></i> Save</a></li>
|
25 | <li><a id="beautifier" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-eye-open"></i> Beautifier</a></li>
|
26 | <li><a id="share" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li>
|
27 | <li><a id="account" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a></li>
|
28 | </ul>
|
29 | </div>
|
30 | </nav>
|
31 |
|
32 | <div class="sidebar"></div>
|
33 | <div class="content clearfix">
|
34 | <div class="window float-left">
|
35 | <textarea id="editor">
|
36 | <div bx-tmpl="list" bx-datakey="list">
|
37 | <table class="table" bx-name="tables" bx-path="brix/gallery/tables/" id="tables">
|
38 | <thead>
|
39 | <tr>
|
40 | <th></th>
|
41 | <th>访问来源</th>
|
42 | <th width="200px">UV占比</th>
|
43 | <th>UV</th>
|
44 | <th>PV</th>
|
45 | <th>人均页面访问数</th>
|
46 | <th>宝贝收藏数</th>
|
47 | <th>收藏率</th>
|
48 | <th>成交金额</th>
|
49 | <th>转化率</th>
|
50 | <th>操作</th>
|
51 | </tr>
|
52 | </thead>
|
53 | <tbody>
|
54 | {{#each list}}
|
55 | <tr class="tr-parent bold">
|
56 | <td><i mx-click="toggle" class="J_expendCollapse icon-expend"></i></td>
|
57 | <td>{{id}} {{分组}}</td>
|
58 | <td>
|
59 | <span class="process-parent" style="width: {{UV占比}}px;"></span>
|
60 | {{UV占比}}%
|
61 | </td>
|
62 | <td>{{UV}}</td>
|
63 | <td>{{PV}}</td>
|
64 | <td>{{人均页面访问数}}</td>
|
65 | <td>{{宝贝收藏数}}</td>
|
66 | <td>{{收藏率}}</td>
|
67 | <td>{{成交金额}}</td>
|
68 | <td>{{转化率}}</td>
|
69 | <td>
|
70 | </td>
|
71 | </tr>
|
72 | {{#each children}}
|
73 | <tr class="tr-child">
|
74 | <td></td>
|
75 | <td>{{渠道}}</td>
|
76 | <td>
|
77 | <span class="process-child" style="width: {{UV占比}}px;"></span>
|
78 | {{UV占比}}%
|
79 | </td>
|
80 | <td>{{UV}}</td>
|
81 | <td>{{PV}}</td>
|
82 | <td>{{人均页面访问数}}</td>
|
83 | <td>{{宝贝收藏数}}</td>
|
84 | <td>{{收藏率}}</td>
|
85 | <td>{{成交金额}}</td>
|
86 | <td>{{转化率}}</td>
|
87 | <td>
|
88 | <div class="operation">
|
89 | <a href="javascript:" mx-click="perspective{ srcIdLevel1:{{srcIdLevel1}},srcIdLevel2:{{srcIdLevel2}},channel:{{渠道}},vs:{{vs}} }" class="mr10">透视分析</a>
|
90 | </div>
|
91 | </td>
|
92 | </tr>
|
93 | {{/each}}
|
94 | {{/each}}
|
95 | </tbody>
|
96 | </table>
|
97 | </div>
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 | </textarea>
|
118 | </div>
|
119 | <div class="handler" id="handler_vertical" style="left: 50%;"></div>
|
120 | <div class="window float-right">
|
121 | <textarea id="result"></textarea>
|
122 | </div>
|
123 | </div>
|
124 |
|
125 | <script src="../node_modules/jquery/tmp/jquery.js"></script>
|
126 | <script src="../node_modules/codemirror/lib/codemirror.js"></script>
|
127 | <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
|
128 | <script src="../node_modules/codemirror/mode/css/css.js"></script>
|
129 | <script src="../node_modules/codemirror/mode/vbscript/vbscript.js"></script>
|
130 | <script src="../node_modules/codemirror/mode/xml/xml.js"></script>
|
131 | <script src="../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
|
132 | <script src="../node_modules/codemirror/mode/coffeescript/coffeescript.js"></script>
|
133 |
|
134 | <script src="../dist/mock.js"></script>
|
135 |
|
136 | <script src="../node_modules/handlebars/dist/handlebars.js"></script>
|
137 |
|
138 | <script type="text/javascript">
|
139 | var mode = 'htmlmixed';
|
140 | </script>
|
141 | <script src="./assets/editor.js"></script>
|
142 | <script type="text/javascript">
|
143 | $(function(){
|
144 | function handle(instance, changeObj){
|
145 | var tpl = instance.getValue();
|
146 | var ast, data;
|
147 | try {
|
148 | ast = Handlebars.parse(tpl);
|
149 | data = Mock.tpl(tpl);
|
150 | } catch( error ) {
|
151 | console.error(error.stack);
|
152 | data = error.toString();
|
153 | }
|
154 | result.setValue(JSON.stringify(data, null, 4));
|
155 | return handle
|
156 | }
|
157 | editor.on('change', handle(editor));
|
158 | });
|
159 | </script>
|
160 |
|
161 | <script>
|
162 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
163 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
164 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
165 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
166 |
|
167 | ga('create', 'UA-27059428-2', 'mockjs.com');
|
168 | ga('send', 'pageview');
|
169 | </script>
|
170 | </body>
|
171 | </html>
|