Fast data-binding library.
Two-way data binding means linking properties of two separate objects - when one changes, the other will automatically update with that change. It enables much easier interactions between data models and UIs, among other uses outside of MVC.
Example
var BindableObject = ; var person = name: "craig" last: "condon" location: city: "San Francisco" ; person; //triggers the bindingperson; //bind location.zip to another property in the model, and do it only onceperson; person;
Installation
npm install bindable-object --save-exact
BindableObject(properties)
creates a new bindable object
value get(property)
Returns a property on the bindable object
var obj = city: name: "SF" ;console; // { name: "SF" }console; // { name: "SF" }console; // SFconsole; // { name: "SF" }
set(property, value)
Sets a value to the bindable object
var obj = ;obj;console; // SF
setProperties(properties)
sets multiple properties on the bindable object
var person = ;person;console; // Jon Doe
has(property)
Returns true if the bindable object has a given property
var obj = count: 0 male: false name: "craig" ; console; // trueconsole; // trueconsole; // trueconsole; // false
listener on(event, callback)
adds a new listener to the bindable object
emit(event[,args...])
emits a new event
var person = ; person; person;
once(event, callback)
listens to one event, then disposes the listener.
var person = ; person; person;person;
removeAllListeners([type])
returns all the listeners on the bindable object
binding bind(from, options)
options
- the options for the binding
to
- the property to bind to. Can be astring
,array
, orfunction
target
- the target bindable object. Default is selfmax
- max number of times to run the data-bindingwhen
- tests the data-bound value before settingmap
- transforms the data-bound valuebothWays
- makes the data-binding bi-directional.
var obj = name: "craig" ; // bind the name, but transform it to upper caseobj; console;obj;console;
binding.now()
Executes a binding now
var bindable = ;var person = name: "jeff" ;person; // above is triggeredperson;
binding.dispose()
Disposes a binding
var bindable = ;var person = name: "jeff" ; var binding = person; binding; person; // binding not triggered
Events
Bindable objects emit a few events:
change:*
- emitted when a property changes on the bindable object. E.g:change:location.zip
.change
- emitted when any property changes on the bindable objectwatching
- emitted when a property is being watcheddispose
- emitted whendispose()
is called on a bindable object
var person = name: "jeff" ; person; person; person; person; person;person;person; // trigger watchingperson;