Akimbo

Akimbo is a small JavaScript library that lets you attach JavaScript objects (Scopes) to DOM elements and add functionality by defining Components.

It was inspired by Angular, and is in essence a simplification of Angular's scope and directive features.

A root scope is created by default (not attached to any DOM element), and additional scopes are created by simply adding a data-scope attribute to an element in HTML.

Components are declared in JavaScript, given a CSS-like selector and a controller function that has access to the parent scope.

To avoid complex change detection, scope objects exposes the functions .set(key, value) and .get(key), and component controllers can watch for changes via .addListener(key, function(newValue, eventSourceEl) {}). Granular collection handling is planned, but not yet implemented.

Bindings are implemented via built-in components, but currently available only for text input elements and some common block/inline level elements. To bind the value of the input or the inner text of the element, simply add the data-binding="name" attribute.

akimbo.component("input[type=text][data-binding]", function(el, scope) {
	// By storing the binding key in an HTML attribute, we enable reusability and a declarative style
	var bindingKey = el.getAttribute("data-binding");

	// Controllers are instantiated in the order they appear in the scope. If a previous controller has set this value, we need to apply this initial value to the input
	el.value = scope.get(bindingKey);

	// Update the scope as the user types into the input
	el.addEventListener("keyup", function() {
		scope.set(bindingKey, this.value, el);
	});

	// Listen for changes and apply the new value to the input
	scope.addListener(bindingKey, function(newValue, eventSourceEl) {
		if (eventSourceEl != el) el.value = newValue;
	});

});

The example above creates illustrates how a simple component is created, and how the component system is used to implement simple bindings.