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 2 months 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 (about 10 years ago)
• Default Branch: master
• Last Pushed: 2024-02-04T20:34:51.000Z (11 months ago)
• Last Synced: 2024-10-12T05:06:51.556Z (2 months ago)
• Topics: data-binding, javascript, mvc, mvc-framework, web-component
• Language: JavaScript
• Homepage:
• Size: 109 KB
• Stars: 16
• Watchers: 5
• Forks: 5
• Open Issues: 2
• 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

{{#blog.entries[#i].text}}

```


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/