README
Binding.js
Bind and watch updating property or member changes of javascript object or DOM-element.
CHANGE.md for changes
SeeFeatures
- Blazing fast over dirty-check and
Object.observe
- Atomic updates
- Properties filter
- Support watching DOM properties and attributes
- Allowing properties with accessors
- Sync with zero latency or async binding
- Follows semantic versioning for releases
- No dependencies
- Allowing static, instanced and prototype methods
- Simplification interface (radmap for v0.1.0)
- Several per-property callbacks (roadmap for v0.1.0)
- Nested object properties filter and observing (roadmap for v1.0.0)
- Drop MutationObservers and use more low-level methods
- One-way, two-way or once type of binding (roadmap for v1.0.0)
Get started
binding.js on node package manager
node.js install:
npm install binding.js
browser setup:
<script src="binding.js"></script>
Syntax
Binding.on(object, properties, callback, options)
Description
Binding.on
add watches for assignment to a properties named properties
in object
, calling callback(target, property, newValue, oldValue)
whenever any property in properties list is set.
Usage
Setup target object or prototype:
var target = { num: 0, text: '' }
Begin watching one of property:
Binding.on(target,'text', function (target, property, newValue, oldValue) { console.log('new value of text:', newValue,' old value: ', oldValue) })
or explicitly watching several properties:
Binding.on(target, ['text', 'num'], function (target, property, newValue, oldValue) { switch (property) { case 'text': console.log('new value of text:', newValue) break case 'num': console.log('new value of num:', newValue) break } })
or watching all properties (you can use:
[]
,null
,undefined
or''
):Binding.on(target, null, function (target, property, newValue, oldValue) { switch (property) { case 'text': console.log('new value of text:', newValue) break case 'num': console.log('new value of num:', newValue) break } })
after that we can change some properties:
target.num = 100500 target.text = 'bang!'
and get console output:
new value of num: 100500 new value of text: bang!
Binding.off(object, properties)
Description
Binding.off
removes a watchpoint set with the Binding.on
method.
Usage
Unbind only one watching property:
Binding.off(target, 'text')
or unbind all watching properties:
Binding.off(target)