README
What's This?
Data binding allows you to detect changes to your data and react by updating the DOM.
Installation
First add databind.js to your page.
<script src="http://cdn.rawgit.com/ken107/databind-js/master/databind.js"></script>
Or bower install databinder.
Detecting Changes To Your Data
Your data is whatever this points to, which is by the default the window object. Say your window object has the following property:
window.blog = {
name: "My blog",
entries: [
{ title: "...", text: "...", isPublished: true },
{ title: "...", text: "...", isPublished: false }
]
}
To bind to the text of the first blog entry, for example, use the binding expression #blog.entries[0].text.
Updating the DOM
Set the text content of an element
<h2>{{#blog.entries[0].title}}</h2>
<p>{{#blog.entries[0].text}}</p>
Hide/show an element
<div bind-statement-1="thisElem.style.display = #blog.entries[0].isPublished ? 'block' : 'none'">
{{#blog.entries[0].text}}
</div>
Change an image
<img bind-statement-1="thisElem.src = #blog.entries[0].isPublished ? 'checked.png' : 'unchecked.png'" />
Toggle a CSS class (using jQuery)
<li bind-statement-1="$(thisElem).toggleClass('published', #blog.entries[0].isPublished)">
{{#blog.entries[0].title}}
</li>
Call a function
<div bind-statement-1="doSomething(#blog.entries[0].text)"></div>
Say you want to repeat an element a number of times
<div bind-repeater-i="#blog.entries.length">{{#blog.entries[#i].text}}</div>
Set the value of an text box
<input type="text" bind-statement-1="thisElem.value = #blog.entries[0].title" />
Etcetera.
The bind-statement specifies a JavaScript statement that should be executed every time your data changes. It is one of SIX binding directives that together let you write responsive apps of any complexity. They're no less capable than Angular or React.
Proceed to the documentation for the full list of binding directives.