JSFiddle - React, Tailwind, and code Playground

by Chad Drummond

HTML

<div id="example"></div>

CSS

a {
  display: block;
  float: left;
  clear: left;
}

JavaScript

//model
var Page = {
	list: function() {
		return m.request({method: "GET", url: "//mithriljs.org/pages.json"});
	}
};

var Demo = {
	//controller
	controller: function() {
		var pages = Page.list();
		return {
			pages: pages,
			rotate: function() {
				pages().push(pages().shift());
			}
		}
	},

	//view
	view: function(ctrl) {
    console.log(ctrl.pages());
		return m("div", [
			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("example"), Demo);