pelonpelon/index.html

## index.html
<!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="http://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>
-->

<!--Mithril(next) Current-->
<!--
<script src="http://output.jsbin.com/xuxase/2.js"></script>
-->

<script src="http://output.jsbin.com/gaciwi/391.js"></script>

<style id="jsbin-css">
.app {
  background-color: yellow;
}
.mycomp {
  background-color: lightblue;
  margin: 10px;
  padding: 10px;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
"use strict";

var App = {};

App.controller = function (attrs) {};

App.view = function (ctrl, attrs) {
  return m("div.app", ["My App", MyComp]);
};

var MyComp = {
  controller: function controller() {},
  view: function view() {
    return m('div.mycomp', 'My Comp');
  }
};

m.mount(document.body, App);
</script>

<script id="jsbin-source-html" type="text/html"><!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>
-->

<\!--Mithril(next) Current-->
<\!--
<script src="http://output.jsbin.com/xuxase/2.js"><\/script>
-->

<script src="http://output.jsbin.com/gaciwi/391.js"><\/script>

</head>
<body>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.app {
  background-color: yellow;
}
.mycomp {
  background-color: lightblue;
  margin: 10px;
  padding: 10px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var App = {}

App.controller = function (attrs) {

}

App.view = function (ctrl, attrs) {
  return m("div.app", [
    "My App",
    MyComp
  ])
}

var MyComp = {
  controller: function(){

  },
  view: function(){
    return m('div.mycomp', 'My Comp')
  }
}


m.mount(document.body, App)</script></body>
</html>

## jsbin.untitled.css
.app {
  background-color: yellow;
}
.mycomp {
  background-color: lightblue;
  margin: 10px;
  padding: 10px;
}

## jsbin.untitled.js
"use strict";

var App = {};

App.controller = function (attrs) {};

App.view = function (ctrl, attrs) {
  return m("div.app", ["My App", MyComp]);
};

var MyComp = {
  controller: function controller() {},
  view: function view() {
    return m('div.mycomp', 'My Comp');
  }
};

m.mount(document.body, App);
	<!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="http://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>
	-->

	<!--Mithril(next) Current-->
	<!--
	<script src="http://output.jsbin.com/xuxase/2.js"></script>
	-->

	<script src="http://output.jsbin.com/gaciwi/391.js"></script>

	<style id="jsbin-css">
	.app {
	background-color: yellow;
	}
	.mycomp {
	background-color: lightblue;
	margin: 10px;
	padding: 10px;
	}
	</style>
	</head>
	<body>
	<script id="jsbin-javascript">
	"use strict";

	var App = {};

	App.controller = function (attrs) {};

	App.view = function (ctrl, attrs) {
	return m("div.app", ["My App", MyComp]);
	};

	var MyComp = {
	controller: function controller() {},
	view: function view() {
	return m('div.mycomp', 'My Comp');
	}
	};

	m.mount(document.body, App);
	</script>

	<script id="jsbin-source-html" type="text/html"><!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>
	-->

	<\!--Mithril(next) Current-->
	<\!--
	<script src="http://output.jsbin.com/xuxase/2.js"><\/script>
	-->

	<script src="http://output.jsbin.com/gaciwi/391.js"><\/script>

	</head>
	<body>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">.app {
	background-color: yellow;
	}
	.mycomp {
	background-color: lightblue;
	margin: 10px;
	padding: 10px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var App = {}

	App.controller = function (attrs) {

	}

	App.view = function (ctrl, attrs) {
	return m("div.app", [
	"My App",
	MyComp
	])
	}

	var MyComp = {
	controller: function(){

	},
	view: function(){
	return m('div.mycomp', 'My Comp')
	}
	}


	m.mount(document.body, App)</script></body>
	</html>