Angular-like two-way data binding
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
pixiedust.js
readme.md
test.html

readme.md

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:

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:

<div data-bound>
	<h1>Hello, {{ Kathy.name }}!</h1>
  <p>{{ Test }}</p>
  <p>I like: {{ likes }}</p>

  Name: <input type="text" data-model="Kathy.name">
  <br />
  <textarea type="text" style="width: 50%" data-model="Test"></textarea>
  <br />Likes:
  <button data-click="setLikes('Turtles')">Turtles</button>
  <button data-click="setLikes('Potatoes')">Potatoes</button>
</div>
<div data-bound>{{ whatever }}</div>

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)