https://github.com/ken107/databind-js
A powerful and flexible MVC data binding library
https://github.com/ken107/databind-js
data-binding javascript mvc mvc-framework web-component
Last synced: about 1 year ago
JSON representation
A powerful and flexible MVC data binding library
- Host: GitHub
- URL: https://github.com/ken107/databind-js
- Owner: ken107
- License: mit
- Created: 2014-10-30T02:31:45.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2024-11-07T06:30:53.000Z (over 1 year ago)
- Last Synced: 2025-02-28T05:53:44.309Z (about 1 year ago)
- Topics: data-binding, javascript, mvc, mvc-framework, web-component
- Language: JavaScript
- Homepage:
- Size: 108 KB
- Stars: 18
- Watchers: 5
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
```html
```
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:
```javascript
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
```html
{{#blog.entries[0].title}}
{{#blog.entries[0].text}}
```
Hide/show an element
```html
{{#blog.entries[0].text}}
```
Change an image
```html
![]()
```
Toggle a CSS class (using jQuery)
```html
{{#blog.entries[0].title}}
```
Call a function
```html
```
Say you want to repeat an element a number of times
```html
```
Set the value of an text box
```html
```
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](https://github.com/ken107/databind-js/wiki/Home) for the full list of binding directives.
## Example
http://jsfiddle.net/wcoczs50/4/