Untitled

<!DOCTYPE html>
<html>

  <head>
    <title>Mithril example</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/drublic/css-modal/master/build/modal.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.26/mithril.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
  </head>

  <body>
    <h3>Mithril example</h3>
    <p>start searching for title</p>
    <div id="node-search"></div>
    <script src="script.js"></script>
  </body>

</html>

var search = {};
// simulate content from drupal
search.model = function(){
  var db = [
        {
            id: 1,
            title: 'Title 1',
            content: 'Content 1'
        },
        {
            id: 2,
            title: 'Title 2',
            content: 'Content 2'
        },
        {
            id: 3,
            title: 'Title 3',
            content: 'Content 3'
        }
    ];
  
  this.data = m.prop([]);
  
  this.find = function(needle){ 
    var regex = new RegExp(needle, 'i'),
        result = _.filter(db, function(node){
          return regex.test(node.title);
        });
    
    this.data(result);
  }
  
  this.getData = function(){
    return this.data();
  }
};

search.controller = function () {
    var model = new search.model();
 
    return { 
      searchList: model,
      widgets: search.widgets,
      find: function(val){
        model.find(val);
      }
    };
};
// view helpers
search.widgets = {};
// css-modal 
search.widgets.dialog = function(node){
  return m('section#modal-' + node.id + '.modal--show', [
              m('.modal-inner', [
                    m('header#modal-label-'+ node.id, node.title),
                    m('.modal-content', node.content)
                ]),
                m('a.modal-close[href="#void"]', 'x')
          ]);
}

search.view = function (ctrl) {
    return [
      m('p', m('input', {oninput: m.withAttr("value", ctrl.find)})),
      m('ul', ctrl.searchList.getData().map(function (node) { 
          return m('li', m('a[href="#modal-' + node.id + '"]', node.title));
      })),
      ctrl.searchList.getData().map(function (node) { 
        return ctrl.widgets.dialog(node);
      })
    ];
};

m.module(document.getElementById('node-search'), search);