親コントローラで関数を呼び出す方法は？

Question

以下のスニペットでは、親のコントローラで関数を呼び出そうとしています。

ミスリルにはどのようなオプションがありますか？

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>

一つの解決策は、子供のコントローラでvnodeを保存し、onClickハンドラからthis.vnode.attrs.onaction()を呼び出すことであろうが、それはアンチパターンではないでしょうか？

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

これはなんですか？

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