Repository is archived
No commit activity in last 3 years
No release in over 3 years
There's a lot of open issues
Easily compile HTML into Rails views for Mithril.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

Runtime

>= 2.2.2
>= 3.2.0
>= 0
 Project Readme

###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 "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>