3rd Party Integration

Getting Started
Resources
- JSX
- ES6
- CSS
- Animation
- Testing
- Examples
- 3rd Party Integration
Key concepts
Social
Misc
- Framework comparison
- Change log/Migration

Integration with third party libraries or vanilla javascript code can be achieved via lifecycle methods.

Example

var FullCalendar = {

    oncreate: function (vnode) {
        console.log('FullCalendar::oncreate')
        $(vnode.dom).fullCalendar({
            // put your initial options and callbacks here
        })

        Object.assign(vnode.attrs.parentState, {fullCalendarEl: vnode.dom})
    },

    // Consider that the lib will modify this parent element in the DOM (e.g. add dependent class attribute and values).
    // As long as you return the same view results here, mithril will not
    // overwrite the actual DOM because it's always comparing old and new VDOM
    // before applying DOM updates.
    view: function (vnode) {
        return m('div')
    },

    onbeforeremove: function (vnode) {
        // Run any destroy / cleanup methods here.
        //E.g. $(vnode.state.fullCalendarEl).fullCalendar('destroy')
    }
}

m.mount(document.body, {
    view: function (vnode) {
        return [
            m('h1', 'Calendar'),
            m(FullCalendar, {parentState: vnode.state}),
            m('button', {onclick: prev}, 'Mithril Button -'),
            m('button', {onclick: next}, 'Mithril Button +')

        ]

        function next() {
            $(vnode.state.fullCalendarEl).fullCalendar('next')
        }

        function prev() {
            $(vnode.state.fullCalendarEl).fullCalendar('prev')
        }

    }

})

Running example flems: FullCalendar