Skip to content
A powerful and flexible MVC data binding library
JavaScript
Branch: master
Clone or download

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples update Aug 18, 2016
.gitignore supermodel check-in May 21, 2015
LICENSE Initial commit Oct 30, 2014
README.md Update README Sep 4, 2018
bower.json v0.0.5 published to npm & bower Mar 8, 2018
databind.js view instances will inherit their placeholder element's classes May 25, 2020
package.json v0.0.5 published to npm & bower Mar 8, 2018

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/

You can’t perform that action at this time.