1 | <!DOCTYPE HTML>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>MOCK FOR XTEMPLATE</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 | <script src="http://g.tbcdn.cn/kissy/k/1.3.1/seed-min.js"></script>
|
11 |
|
12 | </head>
|
13 | <body>
|
14 | <nav class="navbar navbar-default" role="navigation">
|
15 | <div class="navbar-header">
|
16 | <a class="navbar-brand" href="http://mockjs.com">Mock.js</a>
|
17 | </div>
|
18 | <div class="collapse navbar-collapse navbar-ex1-collapse">
|
19 | <ul class="nav navbar-nav">
|
20 | <li class=""><a href="./mock.html">Data</a></li>
|
21 | <li class=""><a href="./mock4tpl.html">Handlebars & Mustache</a></li>
|
22 | <li class="active"><a href="./mock4xtpl.html">KISS XTemplate</a></li>
|
23 | <li class=""><a href="https://github.com/nuysoft/Mock">Github</a></li>
|
24 | </ul>
|
25 | <ul class="nav navbar-nav navbar-right">
|
26 | <li><a id="save" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-ok-sign"></i> Save</a></li>
|
27 | <li><a id="beautifier" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-eye-open"></i> Beautifier</a></li>
|
28 | <li><a id="share" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li>
|
29 | <li><a id="account" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a></li>
|
30 | </ul>
|
31 | </div>
|
32 | </nav>
|
33 |
|
34 | <div class="sidebar"></div>
|
35 | <div class="content clearfix">
|
36 | <div class="window float-left">
|
37 | <textarea id="editor">
|
38 | {{#with data}}
|
39 | {{#if n > ../limit/5.0}}
|
40 | {{n+1.0}}
|
41 | {{/if}}
|
42 | {{/with}}
|
43 |
|
44 | {{#each comments}}
|
45 | {{author}}: {{body}}
|
46 | {{/each}}
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | </textarea>
|
54 | </div>
|
55 | <div class="handler" id="handler_vertical" style="left: 50%;"></div>
|
56 | <div class="window float-right">
|
57 | <textarea id="result"></textarea>
|
58 | </div>
|
59 | </div>
|
60 |
|
61 | <script src="../node_modules/jquery/tmp/jquery.js"></script>
|
62 | <script src="../node_modules/codemirror/lib/codemirror.js"></script>
|
63 | <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
|
64 | <script src="../node_modules/codemirror/mode/css/css.js"></script>
|
65 | <script src="../node_modules/codemirror/mode/vbscript/vbscript.js"></script>
|
66 | <script src="../node_modules/codemirror/mode/xml/xml.js"></script>
|
67 | <script src="../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
|
68 | <script src="../node_modules/codemirror/mode/coffeescript/coffeescript.js"></script>
|
69 |
|
70 | <script src="../dist/mock.js"></script>
|
71 |
|
72 | <script type="text/javascript">
|
73 | var mode = 'htmlmixed';
|
74 | </script>
|
75 | <script src="./assets/editor.js"></script>
|
76 | <script type="text/javascript">
|
77 | $(function(){
|
78 | function handle(instance, changeObj){
|
79 | KISSY.use('mock', function(S, Mock){
|
80 | var tpl = instance.getValue();
|
81 | var data;
|
82 | try {
|
83 | data = Mock.xtpl(tpl);
|
84 | } catch( error ) {
|
85 | console.error(error.stack);
|
86 | data = error.toString();
|
87 | }
|
88 | result.setValue(JSON.stringify(data, null, 4));
|
89 | })
|
90 | return handle
|
91 | }
|
92 | editor.on('change', handle(editor));
|
93 | });
|
94 | </script>
|
95 |
|
96 | <script>
|
97 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
98 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
99 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
100 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
101 |
|
102 | ga('create', 'UA-27059428-2', 'mockjs.com');
|
103 | ga('send', 'pageview');
|
104 | </script>
|
105 | </body>
|
106 | </html>
|