Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/softius/jbindings
Follow changes on any JavaScript Object
https://github.com/softius/jbindings
Last synced: about 1 month ago
JSON representation
Follow changes on any JavaScript Object
- Host: GitHub
- URL: https://github.com/softius/jbindings
- Owner: softius
- License: mit
- Created: 2013-10-03T12:35:06.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-05-28T05:39:22.000Z (over 10 years ago)
- Last Synced: 2023-03-24T07:03:02.745Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 165 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
jBindings
=========
jBindings allows you to follow changes to any JavaScript object. It monitors all object properties for any changes and runs a function (handler) when that occurs.
jBindings comes with a built-in jQuery integration.
Why using jBindings?
-------------------
The functionality is similar with `Object.watch` but there are some important differences:
1. The object is passed to handler as a parameter, instead of just the property.
2. Is is possible to link two properties of diffenent objects with each other. That is to copy the value of the first property to second object's property.
You can refer to instructions for further information.
Instructions
------------
Let's assume that we have the following model.
``` JAVASCRIPT
var User = {
"id": "1",
"username": "softius",
"email": "[email protected]",
"fullname": "Iacovos Constantinou"
}
```
You can follow changes on any property, using the function `follow`. For instance:
``` JAVASCRIPT
// Follow obj User
User.follow(function(item) {
console.log("A change occured to user "+ item.id)
})
// Change user email
User.email = "[email protected]" // This will log "A change made to user 1"
```
In a real app, you might want to update an HTML element like below:
``` JAVASCRIPT
User.follow(function(item) {
$('h1.title').html(item.fullname)
})
```
It is also possible also to follow HTML Elements. This include changes in attributes values.
``` JAVASCRIPT
$('input#user-email').follow(function(item) {
User.email = $(item).val()
});
```
If jQuery is not available you can use vanilla JavaScript, even for HTML elements
``` JAVASCRIPT
document.getElementById('user-email').follow(function(item) {
User.email = item.value
});
```
Last, you can link two objects, in order to copy the value of one's property to second object's property. Hence, we can rewrite the above as below:
``` JAVASCRIPT
$('input#user-email').follow('value', User, 'email')
```
Examples
--------
Examples including integration with [handlebarsjs.com](handlebars.js) can be found under `examples` directory.
Todo
----
* Data bindings via HTML5 Custom Data Attributes
* Data bindings for Model functions