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

ul.main-list {
  background: #ffffcc;
  max-height: 200px;
  overflow-y: scroll;
}

.main-list > li {
  height: 30px;
  position: absolute;
}

JavaScript

//namespace
var app = {};

//model
app.PageList = function() {
    var pages = [];
    pages.push({title: 'home', url: '#'});
    pages.push({title: 'about', url: '#'});
    pages.push({title: 'contact', url: '#'});
    return pages;
};

//controller
app.controller = function() {
    var pages = app.PageList();
	return {
  	offset: 0,
    updateOffset: function() {
    	console.log('+')
    },
  
		pages: pages,
		rotate: function() {
			pages.push(pages.shift());
		}
	}
};

function config(el, isInit, ctx) {

	if (isInit) {
  	el.addEventListener('scroll', function() {
    	console.log('-')
    });
  } else {
    ctx.onunload = function() {
      //do stuff here
    }
  }
}

//view
app.view = function(ctrl) {

	var content = [];
  for (var i = 0; i < 100; i++) {
  	content.push(m("li", { style: { top: (i * 30) + 'px' } }, "line " + i));
  }

	return m("ul", {
  			config: config,
  		  class: "main-list",
        onclick: function() { alert('a'); },
  			scroll: ctrl.updateOffset }, content);

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

//initialize
m.module(document.getElementById("example"), app);