demo/mock4xtpl.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>MOCK FOR XTEMPLATE</title>
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../node_modules/codemirror/lib/codemirror.css" rel="stylesheet">
    <link href="../node_modules/codemirror/theme/neat.css" rel="stylesheet">
    <link href="assets/mock.css" rel="stylesheet">
    <script src="http://g.tbcdn.cn/kissy/k/1.3.1/seed-min.js"></script>
    <!-- <script src="../node_modules/kissy/build/seed-min.js"></script> -->
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="http://mockjs.com">Mock.js</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class=""><a href="./mock.html">Data</a></li>
                <li class=""><a href="./mock4tpl.html">Handlebars &amp; Mustache</a></li>
                <li class="active"><a href="./mock4xtpl.html">KISS XTemplate</a></li>
                <li class=""><a href="https://github.com/nuysoft/Mock">Github</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="save" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-ok-sign"></i> Save</a></li>
                <li><a id="beautifier" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-eye-open"></i> Beautifier</a></li>
                <li><a id="share" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li>
                <li><a id="account" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a></li>
            </ul>
        </div>
    </nav>

    <div class="sidebar"></div>
    <div class="content clearfix">
        <div class="window float-left">
            <textarea id="editor">
{{#with data}}
  {{#if n > ../limit/5.0}}
    {{n+1.0}}
  {{/if}}
{{/with}}

{{#each comments}}
  {{author}}: {{body}}
{{/each}}

<!-- Mock
{
  author: '@NAME',
  body: '@SENTENCE'
}
--></textarea>
        </div>
        <div class="handler" id="handler_vertical" style="left: 50%;"></div>
        <div class="window float-right">
            <textarea id="result"></textarea>
        </div>
    </div>

    <script src="../node_modules/jquery/tmp/jquery.js"></script>
    <script src="../node_modules/codemirror/lib/codemirror.js"></script>
    <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
    <script src="../node_modules/codemirror/mode/css/css.js"></script>
    <script src="../node_modules/codemirror/mode/vbscript/vbscript.js"></script>
    <script src="../node_modules/codemirror/mode/xml/xml.js"></script>
    <script src="../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="../node_modules/codemirror/mode/coffeescript/coffeescript.js"></script>
    
    <script src="../dist/mock.js"></script>
    
    <script type="text/javascript">
        var mode = 'htmlmixed';
    </script>
    <script src="./assets/editor.js"></script>
    <script type="text/javascript">
        $(function(){
            function handle(instance, changeObj){
                KISSY.use('mock', function(S, Mock){
                    var tpl = instance.getValue();
                    var data;
                    try {
                        data = Mock.xtpl(tpl);
                    } catch( error ) {
                        console.error(error.stack);
                        data = error.toString();
                    }
                    result.setValue(JSON.stringify(data, null, 4));
                })
                return handle
            }
            editor.on('change', handle(editor));
        });
    </script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-27059428-2', 'mockjs.com');
      ga('send', 'pageview');
    </script>
</body>
</html>