Mithril + Selectize + JSX

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.min.css">
<script src="//selectize.github.io/selectize.js/js/selectize.js"></script>
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

Babel + JSX

/** @jsx m */


const Selectize = {
  controller(props){
    const config = (el, isInit, ctx) => {
      if (!isInit){
        const $select = $(el).selectize(props.config)
        ctx.selectize = $select[0].selectize
        ctx.selectize.setValue(props.value())
        ctx.selectize.on("change", function(e){
          m.startComputation()
          props.handleChange(this.getValue())
          m.endComputation()  
        })
      }
    }
    return({ config })
  },
  view(ctrl, props){
    return (
      <div>
        <select config={ctrl.config} placeholder='Select fields...'></select>
      </div>
    )
  }
}

const data = [
  {text: "A", value: "a"},
  {text: "B", value: "b"},
  {text: "C", value: "c"},
]

const mySelect = {
  options: data,
  create: false,
  maxItems: null
}

const App = {
  view(){
    return (
      <Selectize
        config={mySelect}
        value={m.prop([])}
        handleChange={v => console.log(v)}
      />
    )
  }
}

const mountNode = document.getElementById("app")
m.mount(mountNode, <App />)