Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<title>Mithril experiment</title>
  <meta name="description" content="mithriljs: Mithril template">
  <meta charset="utf-8">
​
<script>
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    console.log( Array.prototype.slice.call(arguments) );
  }
};
window.dir = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console){
    var args = Array.prototype.slice.call(arguments)
    args.map(function(a){
      console.dir(a)
    })
  }
};
window.ref = function(){
  if(this.console){
    var args = Array.prototype.slice.call(arguments)
    args.map(function(a){
      for(o in this){
        if (this[o] === o && a.toString() === "[object Object]") { log(this[o] + " :: " + JSON.stringify(a)) }
        else if(this[o] === a && Array.isArray(a)) {
               log(o + " :: [" + a + "]");
             }
        else {
          if(this[o] === a) {
            log(o + " :: " + a);
          }
        }
      }
    });
  }
};
$ = function(sel, ctx){return (ctx || document).querySelector(sel)}
$$ = function(sel, ctx){return (ctx || document).querySelectorAll(sel)}
</script>
​
<script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script> -->
​
<!-- modified Mithril with redraw console.logs (extensive) -->
<!-- <script src="http://output.jsbin.com/gaciwi.js"></script> --> 
<!-- modified Mithril with redraw console.logs (redraws only) -->
<script src="http://output.jsbin.com/gaciwi/391.js"></script>
​
</head>
<body>
</body>
</html>
 
//from a post by Leo Horie
https://github.com/lhorie/mithril.js/issues/20#issuecomment-38357465
​
'use strict'
​
let App = {}
App.controller = function() {
  this.class = m.prop("");
  this.changeState = function() {
    this.class("twirl");
  }.bind(this)
}
App.view = (ctrl) => {
  return m("div", [
    m(".twirl", "hello world"),
    m("div", {class: ctrl.class(), onclick: ctrl.changeState}, "click me")
  ])
}
​
m.mount(document.body, App)
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
pelonpelonpro
0viewers