Skip to content

Instantly share code, notes, and snippets.

@indiealexh
Created December 31, 2015 19:51
Show Gist options
  • Save indiealexh/d9a0e848feb5ed863982 to your computer and use it in GitHub Desktop.
Save indiealexh/d9a0e848feb5ed863982 to your computer and use it in GitHub Desktop.
Mithril Js Two Way binding with radio buttons (ES6)
import VM from './viewModel';
export default class Controller {
constructor(args) {
var ctrl = this;
ctrl.vm = new VM(args);
return this;
}
}
import view from './view';
import controller from './controller';
export default {
view: view,
controller: controller
};
export default function(ctrl) {
let vm = ctrl.vm;
var radioAttr = function(val) {
return {
id: val+"-select",
checked: vm.radioVal() === val,
type: "radio",
name: "sccGroup",
value: val
};
};
return m('.game-component', [
// Create the radio group that listens to the events of radio buttons
m('.r-group', {onchange: function(e) { vm.radioVal(e.target.value); } },[
m('input',radioAttr("rock")),
m('label',{for:"rock-select"}, [m('span'),"Rock"]),
m('input',radioAttr("paper")),
m('label',{for:"paper-select"}, [m('span'),"Paper"]),
m('input',radioAttr("scissors")),
m('label',{for:"scissors-select"}, [m('span'),"Scissors"])
]),
m('button',{type: "submit", disabled: (vm.radioVal() === ''), onclick: function(){vm.radioVal('');}},"reset"),
m('h3',vm.radioVal())
]);
}
export default class VM {
constructor(args) {
this.radioVal = m.prop('');//Create the data prop
return this;
}
/**
* Data update event
*/
change(e) {
var v;
v = e.target.getAttribute('value');
return this.radioVal(v);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment