https://github.com/aydncnar/vanilla-data-binder

https://github.com/aydncnar/vanilla-data-binder

data-binding javascript two-way-databinding vanilla

Last synced: 6 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/aydncnar/vanilla-data-binder
• Owner: aydncnar
• License: mit
• Created: 2018-12-22T19:10:32.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-07-26T13:13:00.000Z (almost 6 years ago)
• Last Synced: 2024-08-09T23:45:06.532Z (10 months ago)
• Topics: data-binding, javascript, two-way-databinding, vanilla
• Language: JavaScript
• Homepage:
• Size: 16.6 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Welcome to Vanilla Data Binder

If variables will show on different places, this process can be so complex. You must select dom objects and change their property. And when dom object's property change, you must listen dom events and change your variables by this events.

Two way data binding is a method to make eaiser this process. You can use "2 way data binding" on basic level with this package.

![npm bundle size](https://img.shields.io/bundlephobia/min/vanilla-data-binder)

![npm](https://img.shields.io/npm/dy/vanilla-data-binder)

![enter image description here](https://media.giphy.com/media/khdjLv6hg2q8vEbgVB/giphy.gif)

### 1. Install:

```bash

npm install vanilla-data-binder

```

or

```bash

yarn add vanilla-data-binder

```

### 2. Require:

```js

import Binder from 'vanilla-data-binder';

```

### 3. Usage:

Javascript

```js

import Binder from 'vanilla-data-binder';

let stateList = {

	name: 'Aydin Cinar',

	age: 25

}

window.onload = () => {

	const states = new Binder.Binder(stateList);

}

```

HTML

```html

 // data-bind-value use for text, textarea

 // data-bind-html use for div, span, p etc.

```


### 4. To Change states from javascript:

```js

states.setState('name', 'Aydin'); // Name will set by Aydin

states.setState('age', 26  +  10); // Age will set by 36

```

or 

```js

const newAge = (param)  => {

	return  param  +  15;

};

const newValues = {

	name: 'Aydin Cinar',

	age: newAge(25)

};

states.setState(newValues); // Output => name: Aydin Cinar, age: 40

```