mithril.bindings
These bindings differ from the normal mithril bindings in so far as the value binding is bi-directional by default, so if you change the value the model, it will automatically update the bound field, and we have a more rich properties model.
var app = { thisname = m; } { return ; } { var self = this; selfmodel = "world"; self { selfmodelname"Dave"; } };
Getting started
Simply include mithril.js
and then mithril.bindings.js
afterwards
<script src="mithril.js"><script src="mithril.bindings.js">
Elements
We have had to add a new elements creation mechanism, as the Mithril core is not flexible enough to be able to override the standard way it creates elements, (which is required to create seamless bi-directional binding), so we use:
m
instead of:
The usage signature is identical to Mithril's
Properties
We have added a new property creation mechanism, so we use:
m
instead of:
m
The usage signature is identical to the original Mithril prop
model, with the additional functionality:
Subscribe
m
This will execute function
each time the value of the property changes (works with basic values)
Delay
m
This will delay automatic rendering, so that you can manually trigger it using m.startComputation
and m.endComputation
.
Push on arrays
m
If the underlying property value is an array, you can push values to it.
Included bindings
With the included bindings you can do things like:
Two-way value binding by default:
m
Note: you can also use "valueInput", "valueKeyup", "valueKeypress"
Toggle a boolean attribute on click:
m
Hide an element easily (without manually settings the style attribute):
m
See the /examples directory for more examples!
Custom bindings
You are able to add custom bindings using m.addBinding
, for example:
// Toggle boolean value on clickcontextm;
Each binding will have the property object passed to it, and this
refers to the element's binding scope.
This can be useful for many things, including overriding default functionality.