JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://jlongster.com/s/bloop/app2/app.css">
<script src="//cdn.jsdelivr.net/mithril/0.1.13/mithril.min.js"></script>
JavaScript
var app = {
//model
data: {
"settings": {"bigFonts": false, "color": null},
"selectedItem": "list",
"items": [
{"text": "Would I rather be feared or loved? Easy, both. I want people to be afraid of how much they love me. - Michael Scott"},
{"text": "Sorry I annoyed you with my friendship. -Andy "},
{"text": "I am not a security threat. And, my middle name is Kurt, not Fart. - Dwight Schrute"}
]
},
randomizeColor: function() {
this.onchange("color", "rgb(0, " + (Math.random() * 125 | 0) + ", 0)")
},
reset: function() {
this.onchange("bigFonts", false)
this.onchange("color", null)
},
//controller
controller: function() {
this.data = app.data
this.changeTab = function(name) {
this.data.selectedItem = name
}.bind(this)
this.changeSetting = function(name, value) {
this.data.settings[name] = value
}.bind(this)
},
//view
view: function(ctrl) {
return m("div", {class: "app " + (ctrl.data.settings.bigFonts ? "big" : ""), style: { backgroundColor: ctrl.data.settings.color }}, [
m(".tabs", [
tabs({selectedItem: ctrl.data.selectedItem, onchange: ctrl.changeTab}),
]),
app.choose(ctrl.data.selectedItem, {
"list": list.bind(null, {items: ctrl.data.items}),
"settings": settings.bind(null, {settings: ctrl.data.settings, onchange: ctrl.changeSetting}),
"about": function() {
return m(".about", [
"This is a sample demo",
m("hr"),
m("textarea", {onchange: function() {ctrl.data = JSON.parse(this.value);console.log(ctrl.data)}}, JSON.stringify(ctrl.data))
])
}
})
])
}
}
var tabs = function(ctrl) {
return m("ul", [
m("li", [tab(ctrl, "list")]),
m("li", [tab(ctrl, "settings")]),
m("li", [tab(ctrl, "about")]),
])
}
var tab = function(ctrl, name) {
return m("a", {class: ctrl.selectedItem == name ? "selected" : "", onclick: ctrl.onchange.bind(ctrl, name)}, name)
}
var list = function(ctrl) {
return m("ul.itemlist", [
ctrl.items.map(function(item) {
return...