https://github.com/maxhoffmann/bindings
a minimal binding library for the DOM. runs with component.io and standalone.
https://github.com/maxhoffmann/bindings
Last synced: about 1 year ago
JSON representation
a minimal binding library for the DOM. runs with component.io and standalone.
- Host: GitHub
- URL: https://github.com/maxhoffmann/bindings
- Owner: maxhoffmann
- License: mit
- Created: 2013-11-15T16:47:23.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-07-04T22:53:01.000Z (over 11 years ago)
- Last Synced: 2025-01-23T06:32:00.571Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 305 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# bindings
a minimal binding library for the DOM. runs with component.io and standalone.
bindings.js uses ES5 getters and setters to get or update DOM elements. Keep in mind that
you should treat this library as another way to access the DOM. Don’t do things like
read, write, read, write… or performance might hurt. For best performance, cache the returned
object of bindings() and only get a new one, when you’ve expected DOM changes. Additionally
specify a root element whenever possible. Before you optimize anything: "Use tools, not rules".
The DOM may not be your bottleneck as it is pretty fast in modern browsers.
## Installation
Install with [component(1)](http://component.io):
```bash
$ component install maxhoffmann/bindings
```
…or simply download the repository. Use `bindings.standalone.js` if you don’t use component.io.
## API
If you use component.io make sure to require the library:
```javascript
var bindings = require('bindings');
```
Include `data-bind` attributes in your HTML:
```html
- Max
- 24
- dog
- white
```
Get data from the DOM:
```javascript
var dom = bindings();
var name = dom.person.name; // Max
var color = dom.animal.color; // white
```
Update data in the DOM:
```javascript
var dom = bindings();
dom.person.name = 'Joe';
dom.animal.type = 'cat';
dom.animal.color = 'black'; // you can use HTMLt
```
And the DOM changes automatically:
```html
- Joe
- 24
- cat
- black
```
You may use a different syntax:
```javascript
bindings().person.name // Max
bindings('person').name // Max
```
You may specify a root element:
```javascript
bindings('person', rootElement).name
```
Convert data to JSON:
```javascript
var json = JSON.stringify( bindings('animal') );
var json = JSON.stringify( bindings().animal ); // same result
console.log(json); // "{"type":"cat","color":"black"}"
```
## Customization
Make a new dev build:
```bash
$ make dev
```
Run tests by opening `test/index.html` or run:
```bash
$ make test
```
If all of your tests pass, make a new production build (includes standalone build):
```bash
$ make
```
## License
The MIT License (MIT)