Skip to content

Instantly share code, notes, and snippets.

@barneycarroll
Created March 23, 2015 19:39
Show Gist options
  • Save barneycarroll/8b2c7b571d9e9989d50b to your computer and use it in GitHub Desktop.
Save barneycarroll/8b2c7b571d9e9989d50b to your computer and use it in GitHub Desktop.
A bidirectional input plugin as a Mithril component. With modulator: mod( bidi )( prop, dom ), where 'prop' is an m.prop containing the value, and dom is a compiled Mithril template describing the element. Demo here: http://jsfiddle.net/barney/g3zudyd3/
var bidi = {
view : function( ctrl, prop, node ){
var type = node.tag === 'select'
? node.attrs.multi
? 'multi'
: 'select'
: node.attrs.type;
// Setup: bind listeners
if( type === 'multi' ){
node.attrs.onchange = function(){
prop( [].slice.call( this.selectedOptions, function( x ){
return x.value;
} ) );
}
}
else if( type === 'select' ){
node.attrs.onchange = function( e ){
prop( this.selectedOptions[ 0 ].value );
};
}
else if( type === 'checkbox' ){
node.attrs.onchange = function( e ){
prop( this.checked )
};
}
else {
node.attrs.onchange = node.attrs.oninput = function( e ){
prop( this.value );
}
}
if( node.tag === 'select' ){
node.children.forEach( function( option ){
if( option.attrs.value === prop() || option.children[ 0 ] === prop() ){
option.attrs.selected = true;
}
} );
}
else if( type === 'checkbox' ){
node.attrs.checked = prop();
}
else if( type === 'radio' ){
node.attrs.checked = prop() === node.attrs.value;
}
else {
node.attrs.value = prop();
}
return node;
}
}
@CharlesSymons
Copy link

The demo gives a not found error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment