https://github.com/faebeee/twoway

Tiny zero-dependency two way databinding library
https://github.com/faebeee/twoway

Last synced: about 5 hours ago
JSON representation

Tiny zero-dependency two way databinding library

• Host: GitHub
• URL: https://github.com/faebeee/twoway
• Owner: faebeee
• Created: 2018-02-17T09:56:22.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-26T07:42:53.000Z (over 6 years ago)
• Last Synced: 2024-04-14T07:44:57.039Z (7 months ago)
• Language: JavaScript
• Homepage: https://faebeee.github.io/twoway/
• Size: 965 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# twoway

`twoway` is a very lightweight zerodependency two way databinding library. Specially designed for people wo don't want to have a framework like react, vue or angular.

# Setup

## CDN

To add `twoway` to your website you simply include the library via CDN

    https://cdn.jsdelivr.net/npm/twoway

and when the page is ready run 

    let store = twoway("#app", {

            number: null,

            color: null,

            size: null,

            name: "Fabs",

        }

    );

## NPM

Install it via NPM

    npm i twoway --save

and include and initialize it in you main file

    const twoway = require('twoway');

    let store = twoway("#app", {

            number: null,

            color: null,

            size: null,

            name: "Fabs",

        }

    );

# Playground

- [Simple Input](https://jsfiddle.net/faebeeee/qttdboyq/)

# Usage

## Create a new store

After loading the library in your project it is very simple to setup.

First we create a new `TwoWay` object. The constructor required a root

DOM node for your app and an initial state/store.

    let store = twoway("#app", {

        name: "Fabs",

    })

## Manipulate store

After creating the store you can easily manupulate the values by

calling `store.name = 'Foo';` and the DOM updates automatically

    let store = twoway("#app", {

        name: "Fabs",

    })

    store.name = "Foo Bar";

## Elements

### Select

    


    

        XS

        S

        M

        L

    


### Radiobox

Comming soon

### Checkbox

    


    

         red

    

    

         blue

    


### Textarea

    

    


        
Textarea
        

        


        

        

    


### Input