https://github.com/lilactown/pixiedust
Angular-like two-way data binding
https://github.com/lilactown/pixiedust
Last synced: 8 months ago
JSON representation
Angular-like two-way data binding
- Host: GitHub
- URL: https://github.com/lilactown/pixiedust
- Owner: lilactown
- Created: 2014-06-19T22:10:11.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2014-06-23T17:48:45.000Z (over 11 years ago)
- Last Synced: 2025-02-15T18:48:34.772Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 156 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
PixieDust
==============
Angular-like two-way data binding. I got curious how Angular's magic two-way binding with variables and forms worked, so I decided to try implementing it myself.
http://jsfiddle.net/fJYk7/5/
In your JS, you can use it like so:
```javascript
window.onload = function () {
this.likes = 'Potatoes';
this.setLikes = function (string) {
likes = string;
};
this.Test = 'Super ninja two-way data biiiiind!!!!!!';
function Person(name, age) {
return {
'name': name,
'age': age
};
}
this.Kathy = new Person('Kathy', 23);
bindingInit(); // compile our HTML, bind our variables and begin the update cycle
};
```
And in your HTML, similar to AngularJS' syntax:
```html
Hello, {{ Kathy.name }}!
{{ Test }}
I like: {{ likes }}
Name:
Likes:
Turtles
Potatoes
{{ whatever }}
```
ToDo
-------
- Apparently addEventHandler does not garbage collect on node destruct. Either handle this or switch to binding directly to the node property.
- Support for radios, checkboxes
- Arbitrary javascript execution in {{ }} i.e. {{ 1 + 2 }}
- Repeat
- Filtering
- Multiple scopes
- Custom triggers'
Done
-------
- Support for arrays (d'oh!) (6/23)