Mithril – Referenz Zugriff auf Child Componenten

Downloads:

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.