https://github.com/faebeee/twoway
Tiny zero-dependency two way databinding library
https://github.com/faebeee/twoway
Last synced: 12 months 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 (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-26T07:42:53.000Z (over 8 years ago)
- Last Synced: 2025-01-21T01:44:16.602Z (over 1 year 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