Mithril Show Komponente auf Knopf klicken

Question

Ich muss eine Single Application Page entwickeln, ich wähle Mithril.

Ich brauche eine Komponente auf die Schaltfläche klicken machen, das ist mein Code:

var accountView = { 
    controller: function (data) { 
     return { 
      showOtherPage: function() { 
       ??? how to render an other component ? 
      } 
     } 
    }, 
    view: function (ctrl) { 
     return [ 
      m("button", { onclick: ctrl.showOtherPage }, "Account") 
     ]; 
    } 
} 

Vielen Dank im Voraus

Answer 1

Wenn Sie Mithril die Routing-Funktionalität verwenden und eine ganz neue Seite zeigen möchten, Dann können Sie einen Link verwenden, anstatt eine Schaltfläche zu verwenden. (Persönlich, das ist, wie ich normalerweise antizipieren diese Szenarien Handhabung.) ZB

m("a[href=/otherPage]", { config: m.route }, "Account") 

Fiddle: https://jsfiddle.net/11qjx341/

(Alternativ können Sie auch m.route('/otherPage') innerhalb der showOtherPage Funktion aufrufen können, wenn ein Link für einige nicht geeignet ist Wenn Sie das Mithril-Routing nicht verwenden (z. B. wenn Sie m.mount verwenden), aber immer noch eine ganz neue Seite rendern möchten, möchten Sie möglicherweise m.mount mit der neuen Ansicht aufrufen, um es zu haben.

gerendert zB

m.mount(document.body, otherView); 

Fiddle: https://jsfiddle.net/91g9db6n/

Als dritte Option, wenn die neue Ansicht tatsächlich mit der aktuellen Seite koexistieren gemeint ist, können Sie eine Komponente haben, die basierend auf Zustand angezeigt oder ausgeblendet wird. zB

return [ 
    m("button", { onclick: ctrl.showModal.bind(ctrl, !showModal) }, showModal ? "Hide Account" : "Account") 
    , showModal ? m.component(OtherView) : null 
]; 

Fiddle: https://jsfiddle.net/mk27tfq1/