UNPKG

4.32 kBHTMLView Raw
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 <!-- <script src="../node_modules/kissy/build/seed-min.js"></script> -->
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 &amp; 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<!-- Mock
49{
50 author: '@NAME',
51 body: '@SENTENCE'
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>