Nocturnal Pumpkin Maelstrom

    mithril.bindings

    0.0.5 • Public • Published

    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 = {
        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");
            }
        }
    };

    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.e(...)

    instead of:

    m(...)

    The usage signature is identical to Mithril's

    Properties

    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:

    Subscribe

    m.p(...).subscribe(function)

    This will execute function each time the value of the property changes (works with basic values)

    Delay

    m.p(...).delay(true)

    This will delay automatic rendering, so that you can manually trigger it using m.startComputation and m.endComputation.

    Push on arrays

    m.p(...).push(value)

    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.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!

    Custom bindings

    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.

    Keywords

    none

    Install

    npm i mithril.bindings

    DownloadsWeekly Downloads

    1

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • jsguy