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 = {
model: function(name) {
this.name = m.p(name);
},
view: function(c) {
return [
m("input", { name: "name", value: c.model.name }),
m("div", "Hello " + c.model.name()),
m("button", { onclick: c.setName }, "Set name via model")
];
},
controller: function() {
var self = this;
self.model = new app.model("world");
self.setName = function() {
self.model.name("Dave");
}
}
};
Simply include mithril.js
and then mithril.bindings.js
afterwards
<script src="https://github.com/jsguy/mithril.bindings/raw/master/mithril.js">
<script src="https://github.com/jsguy/mithril.bindings/raw/master/mithril.bindings.js">
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.e(...)
instead of:
m(...)
The usage signature is identical to Mithril's
We have added a new property creation mechanism, so we use:
m.p(...)
instead of:
m.prop(...)
The usage signature is identical to the original Mithril prop
model, with the additional functionality:
m.p(...).subscribe(function)
This will execute function
each time the value of the property changes (works with basic values)
m.p(...).delay(true)
This will delay automatic rendering, so that you can manually trigger it using m.startComputation
and m.endComputation
.
m.p(...).push(value)
If the underlying property value is an array, you can push values to it.
With the included bindings you can do things like:
Two-way value binding by default:
m.e("input", { name: "name", value: u.name })
Note: you can also use "valueInput", "valueKeyup", "valueKeypress"
Toggle a boolean attribute on click:
m.e("button", { type: "button", toggle: u.hide }, "Toggle hide")
Hide an element easily (without manually settings the style attribute):
m.e("div", { hide: u.hide })
See the /examples directory for more examples!
You are able to add custom bindings using m.addBinding
, for example:
// Toggle boolean value on click
context.m.addBinding('toggle', function(prop){
this.onclick = function(){
var value = prop();
prop(!value);
}
});
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.