Mithril, Tutorial - Mithril - Parent Funktion in Child Component aufrufen

Das Aufrufen / Auslösen von Funktionen einer Haupt Komponente in einer Sub / Child Komponente macht das Auslagern von wiederkehrenden Abschnitten einfacher.
z.b. für NavBar / Menu Komponenten

Vorraussetzung:

Mithril - link

Downloads:

JsFiddle

App Einstieg definieren

Für den Einstieg definieren wir eine leere index.html Datei, welche einschließlich den Script integriert.

<!doctype html>
<html>
<head><titlte></title></head>
<body>
<script>
    <!-- hier landet der Script Part -->
</script>
</body>
</html>

Die App Initialisierung erfolgt nach dem Mithril Basic Standard.

var app = {};
m.mount(document.body, app);

Child Component definieren

Für eine Child Komponente reicht ein einfaches Objekt, welches ein Attribut „title“ erwartet.
Zusätzlich werden nach dem „title“ alle „children“ der Component ausgegeben.
Somit lassen sich beim Aufrufen weitere HyperScript Elemente übergeben, welche an der Stelle „ctrl.children“ ausgegeben werden.

var childComponent = {
  view: function(ctrl) {
    return [
      m("div", ctrl.attrs.title),
      ctrl.children
    ];
  }
};

Component in App integrieren

Die Child Component lässt sich nun über m(childComponent) im „view“ Abschnitt von „app“ integrieren.
Zusätzlich wird eine „test“ Funktion definiert, welche innerhalb der Child Component als Event Handler „onclick“ übergeben wird.
Wird nun die App gestartet und der Button der Child Component angeklickt, wird die „test“ Funktion von App ausgelöst.

var app = {
  test: () => { alert("calling parent function"); },
  view: function(ctrl, attrs, children) {
    return m(childComponent, { title: "Navbar Title" }, 
        m("button", { onclick: () => { this.test() } }, "call parent function")
    )
  }
}

#javascript #mithril

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien.

Mithril – Parent Funktion in Child Component aufrufen

Tutorial Mithril