How does Mithril and jQuery interact with each other?

Question

I am using Mithril as our MVC framework & I want to leverage of rich JQuery/Jquery UI functionalities. I would like to understand the \'Do\'s and Don\'t\'s\' when combining

Answer 1

In a nutshell, all config functions are guaranteed to run after the DOM tree has been created. so from within a config, you can call $(bla) without worrying whether the element has been drawn.

The caveat with Mithril (or for that matter, any system that allows subtemplates to be mounted and unmounted) is that elements may be removed from the DOM by conditional logic. Because of this, it's recommended that you either attach config to the element that is going to be affected by the jQuery plugin, or wrap a subtree of elements in a function in order to make it more obvious that a config that uses querySelector applies to that specific range of elements.

For a large number of jQuery calls, it actually doesn't matter if the element being queried is there or not (e.g. $(".foo").hide() simply does nothing if no .foo's are present in the page).

The major thing to be concerned about is that you don't want to drive too much state from the DOM itself (which is somewhat idiomatic in jQuery). For example, toggling the visibility of a panel might be something that can be done quicker in jQuery, but it's harder to reach both visible and invisible states from, say, a page load, if the canonical data source is the CSS class in the DOM that is controlled by jQuery code, instead of a view-model flag that unidirectionally flows into the view.