Binding configuration format

One thing I go back and forth with is which aspect of the binding is the focal point. An example of a target-focused configuration:

Synapse(':checkbox').notify({
    'h1': 'visible',
    ':text': 'enabled'
});

An object is passed with each key being the observer while each value is the setHandler. This binding would read:

The checkbox will notify both the header and text input field. When notified, the header will visible if the checkbox is "checked" and hidden is not. Likewise, the input text field will be enabled if "checked", otherwise it will be disabled.

In this simple example, the event ('change') and the getHandler ('prop:checked') are detected for the ':checkbox' element. For custom bindings, the value of the object can be an object itself:

Synapse('input').notify({
    'h1': {
        converter: function(value) {
            return value.toUpperCase();
        }
    },
    ':submit': 'enabled'
});

In this example, the binding would read:

As the input field changes, the input value will be sent to the header element and the submit button. The prior to setting the inner text of the header, the value will be passed through the converter. The falsy nature of input value will determine whether the submit button is enabled or disabled.

With a Backbone.Model instance as the notifier, this works also, but is a bit verbose:

Synapse(model).notify({
    'h1': {
        getHandler: 'title'
    },
    'em': {
        getHandler: 'author',
    },
    'p': {
        getHandler: 'summary'
    }
});

The biggest problem with this configuration is that keys can only be strings (i.e. jQuery/Zepto selectors). My gut reaction to this is that it's ok. The primary usage Synapse typically is model → DOM or DOM → DOM. That being said, if the subject is a model, than the values of each binding could be the model attribute (getHandler).

Thoughts?

bruth / synapse

Binding configuration format #8