aoy
Tiny JavaScript MVVM library with Virtual DOM. It has only ~600 lines of code.
Install
npm:
$ npm install aoy --save
Usage
ES2015
; //1. init aoy.const myAoy = ;conse store = myAoystore; //2. add a store to aoy instance.store; //3. create a component.const myP = aoy; //4. component connect to a store, view will be render immediately.myAoy; //5. when u update this component's store, view will be render again.storetxt = 'change view';
CommonJS
var myAoy = ;var el = myAoyel;
Browser globals
The dist folder contains aoy.js and aoy.min.js.
<script src="path/to/aoy.js"></script><script>var aoy = Aoy;var store = aoystore;var el = aoyel;</script>
Examples
Api
aoy.init
init function returns a aoy instance.
aoy.el(selectors, props, children])
return a Virtual DOM.
var span = // render <span>this is p</span>var p = // render <p><span>this is p</span></p>var div = // render <div id="mydiv" class="classA classB"></div>
aoy.createComponent(descriptor)
descriptor is Object
descriptor.el:
it is a HTMLElement for component's parentNode.
descriptor.render:
render functon returns vnode.
var inputStore = store;var myinput = aoy;
aoy.connect(component[,stores])
when connect function is called, Virtual DOM will be rendered immediately.
var aoy // mycomponent denpend on a.var aoy // mycomponent denpend on a and b.
store
aoy instance provides a store.
var aoy = Aoy;var store = aoystore;
store.add([key ,] data)
function add is used to save data. if no key, this data's key is _DEFAULT.
aoystore // a:{b:1}aoystore // _DEFAULT:{b:1}
store.get(key)
Return to the corresponding store's data
aoystoreaoystore // return {b: 1}
sotre.set(newData)
update data.
aoystore aoystore //same: aoy.store.get('a') = {a:1, b:2} aoystore // return {a:1, b:2}
Note
- support IE 9 and up + all modern browsers.
- aoy only data-binding one-level key, if data has deep structure, suggest to cooperate immutable-js .