A powerful and flexible MVC data binding library
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.
examples
.gitignore
LICENSE
README.md
bower.json
databind.js
package.json

README.md

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" />

Et cetera.

The bind-statement specifies a JavaScript statement that should be executed every time your data changes. It is one of just 6 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.

Example

http://jsfiddle.net/wcoczs50/4/