https://github.com/luciopaiva/doobie
A minimalist two-way data-binding library for those that are looking for something leaner than big fat frameworks like Angular.js.
https://github.com/luciopaiva/doobie
Last synced: 6 months ago
JSON representation
A minimalist two-way data-binding library for those that are looking for something leaner than big fat frameworks like Angular.js.
- Host: GitHub
- URL: https://github.com/luciopaiva/doobie
- Owner: luciopaiva
- Created: 2015-06-23T03:48:42.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-07-05T00:55:10.000Z (over 10 years ago)
- Last Synced: 2025-03-25T20:33:16.022Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 156 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
**Do not download it yet - the library is still under construction!**
---
A minimalist two-way data-binding library for those that are looking for something leaner than big fat frameworks like
Angular.js.
---
**Do not download it yet - the library is still under construction!**
---
## 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:
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:
The `
` 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 `` tag, it will work as a two-way binding. Any update to the `` will also trigger
an update to the property, and vice-versa:
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 .
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.