###Introduction

This gem allows you to write plain HTML views for your Mithril applications, making it easier to collaborate with designers and other developers not familiar with the Mithril view syntax. It is based on the work that Jonathan Buchanan did on MSX and the react-rails gem.

It allows you to create views with a .js.msx extension.

Example: (app/assets/javascripts/todo.js.msx)

todo.view = function(ctrl) {
    return <div class="dude">
        <input onchange={m.withAttr("value", ctrl.description)} type="text" class="blue" />
        <small class="pea">This is small text</small>
    </div>
};

###Installation

Add gem "ganeshpl-mithril_rails" to your Gemfile.

You can then add Mithril to your asset manifest files with //= require mithril

Unobtrusive JavaScript (Rewrite from react-rails)

mithril_ujs will call m.module for every element with data-mithril-class attribute. Mithril properties can be specified by data-react-props attribute in JSON format. For example:

<!-- mithril_ujs will execute `m.module(node, HelloMessage)` -->
<div data-mithril-class="HelloMessage" data-mithril-props="<%= {name: 'Bob'}.to_json %>" />

To use mithril_ujs, simply require it after mithril (and after turbolinks if Turbolinks is used):

// app/assets/javascripts/application.js

//= require turbolinks
//= require mithril
//= require mithril_ujs

HelloMessage = {}
HelloMessage.controller = function() {
  ...
  // Can access to HelloMessage.properties to get data pass by rails template
}

View helper (Rewrite from react-rails)

There is a view helper method mithril_component. It is designed to work with mithril_ujs and takes a Mithril component, properties, and HTML options as arguments:

mithril_component('HelloMessage', name: 'John')
# <div data-mithril-class="HelloMessage" data-mithril-props="{&quot;name&quot;:&quot;John&quot;}"></div>

By default, a <div> element is used. Other tag and HTML attributes can be specified:

mithril_component('HelloMessage', {name: 'John'}, :span)
# <span data-...></span>

mithril_component('HelloMessage', {name: 'John'}, {id: 'hello', class: 'foo', tag: :span})
# <span class="foo" id="hello" data-...></span>