Mithril – Referenz Zugriff auf Child Componenten

Tutorial Mithril

von Ardian Shala, 11.11.2017 - update: 12.11.2017
Wenn man kein Flux Pattern benutzt, kann die Kommunikation zwischen mehreren Components schwierig werden.
Gerade bei asynchronen Funktionen in Sub Components (z.B. "refresh" einer SubComponent, welche eine async Funktion aufruft), die nach Ereignissen in der Haupt/Parent Compnent aufgerufen werden sollen.
Vorraussetzung:

Downloads:

JsFiddle

App Component erstellen

Erstellen einer Haupt Component „App“, die später die Referenz in „this.child“ schreibt.

class App {
    oninit(vnode) {
        this.child; //referenz, die später zugewiesen wird
    }

    view(vnode) {
        return [
            m("h2", "child reference"),
    }
}
m.mount(document.body, app);

SubComponent erstellen

SubComponent erstellen, die im hook „oncreate“ eine Callback Funktion mittels Attributes aufruft und ihren Context „this“ überreicht.
„refresh“ dient hier als Funktion, die später aufgerufen werden soll.

class SubComponent {
    oncreate(vnode) {
        vnode.attrs.onRef(this);//this context an callback überreichen
    }

    refresh() {
        alert("calling refresh from subcomponent")
    }

    view() {
        return [
            m("div", "hello subcomponent")
        ];
    }
}

Referenz in App zuweisen

In der App Component wird nun die „SubComponent“ erstellt und ihre Funktion „onRef“ aufgerufen.
Die Callback Funtion setzt die Property „child“ in der App Component.
Wichtig ist hier, dass „m.redraw()“ aufgerufen wird, sodass MithrilJs die Änderung eines asynchronen Aufrufes bearbeiten kann.

...
m(SubComponent, { onRef: (ref) => { this.child = ref; m.redraw(); } })
...

Funktion von SubComponent über child aufrufen

Nun kann über „this.child“ auf den Context von SubComponent zugegriffen werden.

onClick() {
    this.child.refresh();//refresh von SubComponent in App aufrufen
},

...
m("div",
    m("button", { onclick: () => { this.onClick(); } }, "trigger child function")
),
...

Fazit

Mittels einfachem asynchronen Callback einer Sub/Child Component lässt sich eine Referenz zu jener Component erstellen.
Anschließend lässt sich der Context in der Parent Component aufrufen und verwenden.

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Frontend Entwickler mit Angular, Ionic und Backend Entwickler mit C#.