m.attrs.bidi

Bi-directional binding for Mithril!

As a custom attribute (requires custom attribute fork):

m( 'input', {
    bidi : valueProp
} )

Custom attribute demo.

...Or as a component (ensures lexical reference):

bidi( {}, m( 'input' ), valueProp )

Component demo

Gimme!

# NPM 
npm install m.attrs.bidi --save
 
# Bower 
bower install m.attrs.bidi --save

The plugin will attach itself as m.attrs.bidi and return / export / expose the same object as a module. The entity in question is both a component and a transformation function that works as a custom attribute.

// Node / Browserify
var bidi = require( 'm.attrs.bidi' )
 
// ES6
import bidi from 'm.attrs.bidi'
 
// RequireJS
require( [ 'm.attrs.bidi' ], function( bidi ){
    /* ... */
} )
 
// HTML
<script src="https://cdn.rawgit.com/barneycarroll/m.attrs.bidi/master/bidi.js"></script>
<script>
 window.bidi = m.attrs.bidi;
</script>

How

Dropdowns

Dropdowns will need their options passed in as normal.

m( 'select', {
    bidi : valueProp
},
    list.map( function( item ){
        return m( 'option', item )
    } )
)

Radio buttons

In the same way, radio buttons need to have values specified

m( 'input[type=radio]', {
    bidi  : valueProp,
    value : item1
} ),
m( 'input[type=radio]', {
    bidi  : valueProp,
    value : item2
} )

Checkboxes

m( 'input[type=checkbox]', {
    bidi : valueProp
} )

Custom attributes?

Custom attributes are a feature request for Mithril. You may be interested in the Github discussion, and in the fork of Mithril that implements the proposal.