Mithril Hello World

Mithril Hello World

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.15/mithril.min.js"></script>
<div id="example"></div>

CSS

/* Fix for iOS 9 modal zoom */
body {
    padding-right: 0px !important
}

.modal-open {
    overflow-y: auto;
}
/* End fix for iOS 9 modal zoom */
          
.bg-active {
    background-color: #449D44;
}

.bg-notactive {
    background-color: #D9534F;
}

.bg-downtime {
    background-color: #EC971F;
}

div .realtime-selector {
    font-size: 1.2em;
}

.realtime-panel {
    margin-bottom: 10px;
}

.realtime-panel-body {
    padding: 10px;
}

div .alert,
div .tablet-config {
    font-size: 1.2em;
}

div .tablet-selector {
    font-size: 1.2em;
    padding-left: 15px;
    padding-right: 0px;
}

div .tablet-selector-group {
    font-size: 1.2em;
    padding-left: 5px;
    padding-right: 0px;
}

div .tablet-spacer {
    min-height: 10px;
}

div .ta-input,
div .time-input,
div .num-input,
div .date-input,
div .text-input {
    padding-left: 15px;
    padding-right: 5px;
}

div .rt-num-input {
    padding-left: 0px;
    padding-right: 5px;
}

div .rt-button {
    padding-left: 15px;
    padding-right: 0px;
}

div .ta-button {
    padding-left: 0px;
    padding-right: 0px;
}

div.date-input-modal {
    padding-left: 15px;
    padding-right:15px;
    font-size: 1.2em;
}

button.ta-button {
    padding-left: 5px;
    padding-right: 5px;
    float: left;
    min-width: 50px;
}

button.error-button {
    padding-left: 5px;
    padding-right: 5px;
    float: right;
    min-width: 50px;
}

button.pc-start-button {
    float: center;
}

.centered {
    text-align:center;
}

div .time-button {
    padding-left: 0px;
}

div .prod-data-tabs {
    padding-left: 15px;
    padding-right: 15px;    
}

button.time-button {
    padding-left: 5px;
    padding-right: 5px;
    float: left;
    min-width: 50px;
}

.form-control {
    font-size: inherit;
    color: #222222;
}

.logo {
    float: left;
}

label {
    color: #666666;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 3px;
    font-size: 0.8em;
}

label.nouppercase {
    color: black;
    font-weight:...

JavaScript

var textInput = {};
textInput.controller = function(data) {
    var ctrl = this;
    data = data || {};
    ctrl.id = data.id; 
    ctrl.title = data.title;
    ctrl.clearButton = data.clearButton || false;
    ctrl.text = data.text || m.prop('');
    ctrl.onchange = data.onchange || m.prop('');
    ctrl.change = function(text) {
    		console.log(text);
        ctrl.onchange(text);
        ctrl.text(text);
    }
    ctrl.onclickClear = function() {
        ctrl.change('');
    }
}
textInput.view = function(ctrl) {
    var comps = [];
    comps.push(
    	m('div.row',
			 m('div', 
		  	 m('label', {for: ctrl.id}, ctrl.title))));
    
    comps.push(m('div',
    		 m('div', {
    		     class: 'text-input',
    		     id: ctrl.id
    		 }, m('p', m('div', {style:{position: 'relative'}}, 
    			     m('input', {type:'text', class:'form-control numselect', oninput:m.withAttr('value', ctrl.change),
    					 value:ctrl.text()}))))
    ));
    
    return comps;
}


//namespace
var app = {};

//model
app.PageList = function() {
    var pages = [];
    pages.push({title: 'page 1', url: '/page1.html'});
    pages.push({title: 'page 2', url: '/page2.html'});
    pages.push({title: 'page 3', url: '/page3.html'});
    pages.push({title: 'page 4', url: '/page4.html'});
    return pages;
};

//controller
app.controller = function() {
    var pages = app.PageList();
    
    var textboxes = [];
    textboxes.push(new textInput.controller({id: 1, title: 'Text Input 1'}));
    textboxes.push(new textInput.controller({id: 2, title: 'Text Input 2'}));
	return {
		pages: pages,
		rotate: function() {
			pages.push(pages.shift());
		},
    textboxes: textboxes
	}
};

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