Using jQuery UI functions with Mithril

Question

I am new to the Mithril JS framework and I love its rendering performance. It being light-weight is a plus, but I would like to use jQuery UI so that I can benefit from some of its functionality such as the draggable interaction. From my understanding, both jQuery UI and Mithril manipulate DOM elements. If so, how practical is it to use jQuery UI with Mithril?

Answer 1

Your question is a bit open ended, but to give a useful answer: Mithril templates don't actually touch the DOM until you call either m.render, m.module or m.route. When you do, the diff engine creates or updates elements as needed to mirror the structure of the template. You can use config in templates to get to real DOM elements, and run jQuery/jQuery UI on them:

function draggable(element, isInitialized) {
  if (!isInitialized) $(element).draggable()
}

var module = {}
module.controller = function() {
  this.greeting = "Hello"
}
module.view = function(ctrl) {
  m("div", {config: draggable}, ctrl.greeting)
}

m.module(document.body, module)