This is a zero dependency library to do simple one-way data binding.
24 |Well, I wanted a way to do data binding without having to include angular.js or jQuery.
28 |Just include simplebinder.js in your page, and copypasta some examples.
32 |This is a dump of all the inputs that simplebinder supports.
39 |Note: there is no checkbox or file input.
40 |number
43 | 44 | 45 |select
46 | 50 |area
51 |area
52 | 53 | 54 |range
55 | 56 |radio
57 | 58 | 59 | 60 |checkbox
61 |only handles unique names
62 | 63 |checkbox checked value
64 |this is checking the "checked" value on the checkbox
65 | 66 |time
68 | 69 |date
70 | 71 |color
72 | 73 |datetime
74 | 75 |datetime-local
76 | 77 |week
78 | 79 |item1
85 | 86 |item2
87 | 88 |item3
89 | 90 |Here are some of the methods and functions that are part of every simplebinder.
96 |Markup required for a simplebinder element.
99 |<p data-model="number">number</p>
100 | <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.
102 |Create a new simplebinder element.
103 |var sb = SimpleBinder('modelname', function(input, model) {
104 | console.log(input.value);
105 | });Destroy a simplebinder element.
107 |sb.destroy();Add a new controller to a simplebinder element.
109 |sb.addController('new-controller-name');Add a new model to a simplebinder element.
111 |sb.addModel('new-model-name');See all models on a simplebinder element. Returns an arrary of strings with querySelectorAll queries.
113 |sb.models;See all controllers on a simplebinder element. Returns an arrary of strings with querySelectorAll queries.
115 |sb.controllers;Custom events and attributes
117 |var sb = SimpleBinder('modelname', {
118 | watch: 'value', // what controller attribute are we watching?
119 | change: 'className', // the attribute to change on the model, default = textContent
120 | defaultValue: 'I Am Empty' // the value to put in the model when the controller value is empty
121 | }, function(input, model) {
122 | console.log(input.value);
123 | });You can set a default value directly on the model for when the controller value is empty.
126 |<p data-model="default-100" data-default="Please Enter A Value">100</p>
127 | <input type="text" data-controller="default-100" />
128 | If a default value is set in the config object when the element is created, the inline default will take priority.
130 |Markup required for multiple simplebinder elements.
132 |<p data-model="number">number</p>
133 | <input type="text" data-controller="number" class="collection" />
134 | <p data-model="another-number">another-number</p>
135 | <input type="text" data-controller="another-number" class="collection" />
136 | <p data-model="more-number">more-number</p>
137 | <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(
140 | document.getElementsByClassName('collection'),
141 | function(e, t) {
142 | console.log(e.value);
143 | });I did. You can find me at these fine locations.
150 |This library uses querySelectorAll, so if you don't have that... well you're fucked.
159 |If you find an issue, or want to see the source, check out the github page.
160 | SimpleBinder On Github 161 |