How to call a function on parent controller? - mithril.js

Question

In the snippet below I'm trying to call a function on parent's controller.
What options Mithril provides?
class Parent {
view(vnode){
return m(Child, {onaction: this.onAction});
}
onAction = () => { //TO BE CALLED BY CHILD
console.log('on action');
}
};
class Child {
view(vnode){
return m(Button, {onclick: this.onClick})
}
onClick = () => {
// NEEDS TO CALL PARENT'S ONACTION FUNCTION FROM HERE
console.log('click');
}
};
class Button {
view(vnode){
return m('button', vnode.attrs, 'button')
}
}
m.render(document.body, m(Parent));
<script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/1.1.1/mithril.min.js"></script>
One solution would be to save vnode in child's controller and then call this.vnode.attrs.onaction() from onClick handler, but wouldn't it be an anti-pattern?
class Parent {
view(vnode){
return m(Child, {onaction: this.onAction});
}
onAction = () => {
console.log('on action');
}
};
class Child {
view = (vnode) => { //Is it ok to bind it?
this.vnode = vnode;
return m(Button, {onclick: this.onClick})
}
onClick = () => {
console.log('click');
this.vnode.attrs.onaction();
}
};

Answer 1

Something like this?
class Parent {
view (vnode) {
return m(Child, {onclick: this.onAction});
}
onAction () {
console.log('on action');
}
};
class Child {
view(vnode){
let parentOnClick = vnode.attrs.onclick
vnode.attrs.onclick = () => {
parentOnClick()
this.onAction()
}
return m(Button, vnode.attrs)
}
onAction () {
console.log('click');
}
};
class Button {
view(vnode){
return m('button', vnode.attrs, 'button')
}
}
m.render(document.body, m(Parent));
Here a working fiddle