How to run code after a RouteResolver has finished rendering?

[sheffieldnikki]

Mithril version: 2.0.4

In the docs (https://mithril.js.org/route.html#preloading-data), a RouteResolver object is used for preloading data with onmatch and then the vnode is returned by the render hook.

I'd like to run code after the rendering has completed, which for a component could be done from the oncreate hook, but RouteResolver objects don't have lifecycle methods? Apologies for the noob question, but I'm just getting started using Mithril. Thanks!

Code

var state = {
    users: [],
    loadUsers: function() {
        return m.request("/api/v1/users").then(function(users) {
            state.users = users
        })
    }
}

m.route(document.body, "/user/list", {
    "/user/list": {
        onmatch: state.loadUsers,
        render: function() {
            return state.users.map(function(user) {
                return m("div", user.id)
            })
        }
    },
})

[orbitbot]

@sheffieldnick feel free to drop by the https://gitter.im/mithriljs/mithril.js chat for more informal discussions.

Routeresolvers are not generally intended to be used for anything else than 1) conditional routing and potentially loading data before a route is navigated to, and 2) providing a (shared) layout to wrap a component (subtree) with. Which means that they don't actually provide a way to achieve what you're asking for, that I can think of off the top of my head. Could you expand on what you would like to achieve, it might be possible to manage in some other way?

[sheffieldnikki]

Thanks. I'd like to:

1. Go to a page with a URL such as /user/:id
2. Preload data from a server using m.request for that id (so there is no UI flicker with the typical "loading..." view and then a second call to view once the load is complete)
3. Convert that data into a vnode tree for Mithril to render on screen
4. Run additional code once the vnode has been rendered. eg. lazyload images using Mika Tuupola's library, scroll the page, etc

[orbitbot]

@sheffieldnick 👍 There's not really anything in the listed things that on first thought would require particularly much non-typical usage, the lazyload and scoll parts might need a bit of thought, but otherwise it can be fairly straightforward.

[CreaturesInUnitards]

@sheffieldnick not to undo anything @orbitbot said, but just FYI lifecycle methods are available to every vnode, not just components, and also to m.fragment. So in your case you could just wrap your mapped state.users in

m.fragment({ oncreate: vnode => { ... }}, state.users.map( ... ))

[sheffieldnikki]

Thanks @CreaturesInUnitards that is just what I was looking for: a simple change and lets me reuse my previous oncreate code from before I switched to using a RouteResolver. Works great.