Skip to content

Instantly share code, notes, and snippets.

@AGoblinKing
Last active August 29, 2015 14:14
Show Gist options
  • Save AGoblinKing/3f952cd67fdd497d2107 to your computer and use it in GitHub Desktop.
Save AGoblinKing/3f952cd67fdd497d2107 to your computer and use it in GitHub Desktop.
Mithril Components using a Module Loader
var m = require("mithril");
module.exports = function Component(ctrl) {
var foo = ctrl.Component.foo = m.prop(5);
ctrl.Component.clicked = function() {
ctrl.Component.foo(++foo);
};
return function ComponentView() {
return m("div", {
onclick : ctrl.Component.clicked
}, ctrl.Component.foo());
};
};
var m = require("mithril");
module.exports = function Input(ctrl) {
return function InputView(type, value) {
return m("input", {
type : type,
value : value
});
};
};
var m = require("mithril");
module.exports = function Many(ctrl) {
var selfCtrl = {
bloop : m.prop("You take my self, you take my self control"),
clicked : function() {
selfCtrl.bloop("You got me livin' only for the night");
}
};
// If you wanted access to it on the ctrl.many namespace
ctrl.many = ctrl.many || [];
ctrl.many.push(selfCtrl);
return function ManyView() {
return m("div", {
// you take, you take my selfCtrl
onclick : selfCtrl.clicked
}, selfCtrl.bloop());
};
};
var m = require("mithril"),
ctrl = {},
ComponentView = require("./component")(ctrl),
InputView = require("./input")(ctrl),
PassView = require("./passthrough")(ctrl),
Many = require("./many"),
many1 = Many(ctrl),
many2 = Many(ctrl);
module.exports = {
// Ideally I could just do controller : ctrl,
controller : function() {
ctrl.areYou = m.prop("I'm a pass view");
ctrl.sureYouAre = function() {
ctrl.areYou("No you're not");
};
return ctrl;
},
view : function(ctrl) {
return m("div", [
m("h1", "Testing"),
ComponentView(),
InputView("text", "Some text here"),
PassView({
onclick : ctrl.sureYouAre
}, ctrl.areYou()),
// these are different
many1(),
many2()
]);
}
};
var m = require("mithril");
module.exports = function Pass(ctrl) {
return function PassView(params, value) {
// Do a bunch of complicated styling, event handling, and/or billions of children
return m("div", params, value);
};
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment