https://github.com/ahabra/data-bind
Simple two-way data binding for JavaScript
https://github.com/ahabra/data-bind
data-binding javascript-library
Last synced: 3 months ago
JSON representation
Simple two-way data binding for JavaScript
- Host: GitHub
- URL: https://github.com/ahabra/data-bind
- Owner: ahabra
- License: apache-2.0
- Created: 2020-02-21T03:58:46.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-05-25T00:05:37.000Z (10 months ago)
- Last Synced: 2025-09-19T22:59:17.928Z (6 months ago)
- Topics: data-binding, javascript-library
- Language: JavaScript
- Size: 492 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Data Bind
Easy to use, two-way data binding library, light-weight, and with no dependencies.
## What is Data Binding
We _bind_ a DOM element on a page to a variable or object in the JS code, such that when
one changes, the other will change automatically.
For example if we have an input box that we bind to the property `person.name`,
if the user enters a value in the input box, `person.name` will change. If the programmer
changes the value in `person.name` the input box will also change.
## Install
You can use this library as either an ES6 module or the old way as a script that
you include in your html file.
### Install as NPM ES6 Module
If you plan to use this package as an NPM module, install it:
npm install @techexp/data-bind
### Install as a Script
If you plan to use this package as a JS script library:
```html
```
Alternatively, you can download the file
`https://github.com/ahabra/data-bind/blob/master/dist/data-bind-script-min.js`
and use directly.
## Usage
If you installed as an NPM module:
```js
import bind from '@techexp/data-bind'
```
If you installed it as Script, the bind function is available at `window.bind()`
### Quick Code Demo
```html
```
```js
const obj = {};
bind({obj, prop:'age', sel:'#age'});
obj.age = 10; // Notice how the view will change
// Now manually edit the input box on the page
// then from the browser's console tab:
consol.log(obj.age);
```
### API
There is a single function `bind()` that you can use. It takes a single argument
object with the following keys:
1. `obj`: An existing object where a property will be bound. Optional. If missing,
a new object is created and returned by the `bind()` function.
2. `prop`: The name of the property to be bound. It can be an existing
property or a new one. Required, string.
3. `sel`: A CSS selector which selects an element on the page. Optional, string. If
ommitted, then an unbounded property will be created.
4. `attr`: The name of an attribute on the selected element. Optional, string.
5. `root`: The root DOM node which contains the bound element. If ommitted, then
`document` will be the root. Optional, DOM Element.
6. `getter`: An optional function that returns the value of the bound property. This can be
used instead of the selector `sel`. The function takes no arguments and returns a value.
7. `setter`: An optional function that takes a value argument and assigns it to the bound
property. This can be used instead of the selector `sel`.
6. `onChange`: A callback which is invoked when the value of a property is changed through
an API invocation (_and not through UI interaction_). The callback function takes two
arguments `(oldValue, newValue)`.
The `bind()` function returns the bound object.
When `attr` is given, the value of the attribute is bound to the property.
For example, you can bind the style attribute to a property.
```js
bind({obj, prop:'carColor', sel:'#carColor', attr:'style'});
// then you can change the element's background color:
obj.carColor = 'background-color:red';
```
When `attr` is __not__ given:
* If the selected element is input-type element (`input`, `textarea`, or `select`),
the value of the element is bound.
* Otherwise, the `innerHTML` of the element is bound.
#### Using root
The `bind()` function can be called with an optional `root` argument. For example, consider this html fragment:
```html
```
We can bind the `name` as follows:
```js
const obj = {};
const root = document.getElementById('container');
bind({obj, prop:'name', sel:'.name', root});
```
Look at this repo's `example/example.html` for a fully working example.