Skip to content

Instantly share code, notes, and snippets.

@Satyam
Created June 13, 2014 16:07
Show Gist options
  • Save Satyam/1e63aa62ebe9ac7e194f to your computer and use it in GitHub Desktop.
Save Satyam/1e63aa62ebe9ac7e194f to your computer and use it in GitHub Desktop.
Example of alternate Mithril module
/* globals Mithril, console, document */
(function (m) {
//controller
var app = function () {
// model initialization, if does not already exists
if (!app.list) {
app.list = m.request({
method: 'GET',
url: 'data/quotes.json'
});
}
// app properties
this.color = m.prop('');
this.bigFonts = m.prop(false);
// event listeners
this.reset = function () {
this.bigFonts(false);
this.color('');
}.bind(this);
this.randomizeColor = function () {
this.color("rgb(0, " + (Math.random() * 125 | 0) + ", 0)");
}.bind(this);
};
//models
// I keep a static copy of the list in the app
// so it doesn't get reloaded each time the route changes
// and a new app instance gets initialized
app.list = null;
var p = app.prototype;
//view
p.view = function () {
return m(
"div", {
class: "app " + (this.bigFonts() ? "big" : ""),
style: {
backgroundColor: this.color()
}
},
tabs({
list: this.listView,
settings: this.settingsView,
about: this.aboutView
}, this)
);
};
p.listView = function () {
return m(
"ul.itemlist",
app.list().map(function (item) {
return m("li", item.quote + ' - ' + item.author);
})
);
};
p.settingsView = function () {
return m(".settings", [
m("div", [
m("input[type=checkbox]", {
checked: this.bigFonts(),
onclick: m.withAttr('checked', this.bigFonts)
}),
"big fonts"
]),
m("div", [
m("button", {
onclick: this.randomizeColor
}, "random color")
]),
m("div", [
m("button", {
onclick: this.reset
}, "reset")
])
]);
};
p.aboutView = function () {
return m(
".about", [
"This is a sample demo",
m("hr"),
m(
"textarea", {
rows: 10,
cols: 80,
onchange: function () {
app.list(JSON.parse(this.value));
console.log(app.list());
}
},
JSON.stringify(app.list)
),
m('p', 'If you go to the [list] tab, you will see the changes at once.')
]
);
};
/*
Receives a reference to the controller and
an object with the labels to be shown as the keys and
the content as functions returning the result of an m() call.
I'm using a potentially localizable string as the key to the tabs.
That is not a good idea but for the example it serves
*/
var tabs = function (options, scope) {
// read the tab key from the URL or use the first key as default
var tabKey = m.route.param('tab') || Object.keys(options)[0];
var tab = function (name) {
return m("li", [
m("a", {
class: tabKey == name ? "selected" : "",
href: '/' + name,
// let Mithril take care of the routing
config: m.route
}, name)
]);
};
return [
// tabs:
m('.tabs', [
m("ul", Object.keys(options).map(tab))
]),
// body:
options[tabKey].call(scope)
];
};
// routing setup
m.route(document.body, '/', {
'/': app,
'/:tab': app
});
})(Mithril);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment