Simple Data Binder

number

select

First Choice Second Choice

area

area

range

radio

checkbox

only handles unique names

checkbox checked value

this is checking the "checked" value on the checkbox

These inputs have to be valid in order to trigger their events.

time

date

color

datetime

datetime-local

week

item1

item2

item3

Markup required for a simplebinder element.

<p data-model="number">number</p>
<input type="number" data-controller="number" />

As you can see, you must have a data-model and a data-controller set on your items. Models are like the destination for the data-controllers value.

Create a new simplebinder element.

var sb = SimpleBinder('modelname', function(input, model) {
  console.log(input.value);
});

Destroy a simplebinder element.

sb.destroy();

Add a new controller to a simplebinder element.

sb.addController('new-controller-name');

Add a new model to a simplebinder element.

sb.addModel('new-model-name');

See all models on a simplebinder element. Returns an arrary of strings with querySelectorAll queries.

sb.models;

See all controllers on a simplebinder element. Returns an arrary of strings with querySelectorAll queries.

sb.controllers;

Custom events and attributes

var sb = SimpleBinder('modelname', {
  watch: 'value', // what controller attribute are we watching?
  change: 'className', // the attribute to change on the model, default = textContent
  defaultValue: 'I Am Empty' // the value to put in the model when the controller value is empty
}, function(input, model) {
  console.log(input.value);
});

Inline Default Values

You can set a default value directly on the model for when the controller value is empty.

<p data-model="default-100" data-default="Please Enter A Value">100</p>
<input type="text" data-controller="default-100" />

If a default value is set in the config object when the element is created, the inline default will take priority.

Multiple Elements

Markup required for multiple simplebinder elements.

<p data-model="number">number</p>
<input type="text" data-controller="number" class="collection" />
<p data-model="another-number">another-number</p>
<input type="text" data-controller="another-number" class="collection" />
<p data-model="more-number">more-number</p>
<input type="text" data-controller="more-number" class="collection" />

You can pass an array of elements to the SimpleBinder function to create multiple elements at the same time. In this example, we passed a NodeList of objects with the class of collection.

var collection = SimpleBinder(
document.getElementsByClassName('collection'),
function(e, t) {
  console.log(e.value);
});