UNPKG

6.33 kBHTMLView Raw
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 &amp; 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<!-- Mock {
99 'id|+1': 1,
100 'list|1-5': [],
101 'children|1-5': [],
102 '分组|1': '@AREA',
103 '渠道|1': '@REGION',
104 'percent|1-100': 1,
105 'UV占比|1-100': 1,
106 'UV|1-100000000': 1,
107 'PV|1-100000000': 1,
108 '人均页面访问数|1-100000000': 1,
109 '宝贝收藏数|1-100000000': 1,
110 '收藏率': '@percent%',
111 '成交金额|1-100000000.2': 1.0,
112 '转化率': '@INTEGER(1,100)%',
113 'srcIdLevel1|1-10': 1,
114 'srcIdLevel2|1-10': 1,
115 'vs': '@渠道'
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>