A minimalist two-way data-binding library for those that are looking for something leaner than big fat frameworks like Angular.js.

How to install

bower install --save doobie

Or if you're using npm:

npm install --save doobie

Just include it in your HTML file. You will also need to include jQuery before including this library:

<script src="jquery.js" />
<script src="doobie.js" />

Then all that you have to do is invoke $.doobie() and pass your model to the library:

$.doobie({
    firstName: 'Foo',
    lastName: 'von Bar',
    fullName: function(firstName, lastName) {
        return this.firstName + ' ' + this.lastName;
    }
});

And then, in your HTML, reference your model using doobie attributes. See below.

One-way data-binding (model -> view)

For instance:

<p doobie="firstName"></p>

The <p> element's content will immediately be filled with the value from firstName and every time it changes. It works with every element that is a container.

Two-way data-binding (model <-> view)

If you bind it to an <input> tag, it will work as a two-way binding. Any update to the <input> will also trigger an update to the property, and vice-versa:

<input type="text" doobie="lastName" />

It works for textarea elements too. select is on the roadmap yet.

Computed properties

For cases that you want to bind to the DOM some processed version of the model you have, you should use a computed property. It allows you to specify a function that will be called every time some of its dependencies change. For example, say you have the following model:

$.doobie({
    firstName: 'Foo',
    lastName: 'von Bar',
    fullName: function(firstName, lastName) {
        return this.firstName + ' ' + this.lastName;
    }
});

And then your HTML has a div like this:

Your name is <span doobie="fullName"></span>.

Doobie watches for those function's parameters and parses them as properties of your model. So, every time at least one of those properties change, your function is called to update DOM elements that are bound to it.

Arrays

It is a very common pattern to map an array to rows in a table in HTML. In general, you may want to map an array to a list of any element type. To be able to do that, you can the same attribute doobie that you use for other bindings. The DOM will be kept up to date with the array every time an item is added, updated or removed from it.

Array elements themselves can contain other objects, even other arrays, and the binding will still work as expected.