akiyoshi83
10/12/2015 - 4:54 AM

Try Mithril

Try Mithril

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try mithril</title>
    <style type="text/css" media="screen">
      #header {
        height: 80px;
        width: 100%;
      }
      #header h1 {
        margin: 0;
        padding: 0;
        font-size: 120%;
      }
      #editor {
        position: absolute;
        top: 80px;
        bottom: 0;
        left: 0;
        width: 49%;
      }
      #result {
        position: absolute;
        top: 80px;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="header">
        <h1>Try Mithril</h1>
        <button id="run" title="Command-Enter">RUN (Command+Enter)</button>
      </div>
      <div id="editor">//namespace
var app = {};

//model
app.PageList = function() {
  //return m.request({method: "GET", url: "pages.json"});
  return m.prop([
    { title: "page 1", url: "http://example.com/1" },
    { title: "page 2", url: "http://example.com/2" },
    { title: "page 3", url: "http://example.com/3" },
  ]);
};

//controller
app.controller = function() {
  var pages = app.PageList();
  return {
    pages: pages,
    rotate: function() {
      pages().push(pages().shift());
    }
  }
};

//view
app.view = function(ctrl) {
  return [
    ctrl.pages().map(function(page) {
      return m("a", {href: page.url}, page.title);
    }),
    m("button", {onclick: ctrl.rotate}, "Rotate links")
  ];
};


//initialize
m.mount(document.getElementById("main"), app);
      </div>
      <iframe id="result" srcdoc='
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try mithril</title>
  </head>
  <body>
    <div id="main">
      RESULT AREA
    </div>
    <script>
      window.onerror = function(msg, file, line, column, err) {
        parent.console.error(arguments);
      }
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
    <div id="injectable"></div>
  </body>
</html>
      '></iframe>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-github.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-javascript.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/snippets/javascript.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-keybinding_menu.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/keybinding-vim.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/github");
        editor.setKeyboardHandler("ace/keyboard/vim");
        editor.getSession().setMode("ace/mode/javascript");
        editor.getSession().setTabSize(2);
        editor.$blockScrolling = Infinity;
        editor.setOptions({
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true
        });
        function run() {
          var code = editor.getValue();
          var iframe = document.getElementById('result');
          var doc = iframe.contentDocument
          var oldScript = doc.getElementById('injectable');
          var parentNode = oldScript.parentNode;
          var newScript = doc.createElement('script');
          newScript.setAttribute('id', 'injectable');
          newScript.textContent = code;
          parentNode.replaceChild(newScript, oldScript);
        }
        editor.commands.addCommand({
          name: 'myCommand',
          bindKey: {win: 'Ctrl-Enter',  mac: 'Command-Enter'},
          exec: function(editor) {
            run();
          },
          readOnly: true
        });
        document.getElementById('run').addEventListener('click', run);
      });
    </script>
  </body>
</html>