Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aoy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

aoy

Tiny JavaScript MVVM library with Virtual DOM. It has only ~600 lines of code.

Install

npm:

$ npm install aoy --save

Usage

ES2015

import { init, el } from 'aoy';

//1. init aoy.
const myAoy = init();
conse store = myAoy.store;

//2. add a store to aoy instance.
store.add('firstStore',{txt: 'this is a P'});

//3. create a component.
const myP = aoy.createComponent({
                el: document.body,
                render: function(){
                    return el('p', this.firstStore.txt);
                }
            });
            
//4. component connect to a store, view will be render immediately.
myAoy.connect(myP, 'firstStore');

//5. when u update this component's store, view will be render again.
store.get('firstStore').txt = 'change view';

CommonJS

var myAoy = require('aoy').init();
var el = myAoy.el;

Browser globals

The dist folder contains aoy.js and aoy.min.js.

<script src="path/to/aoy.js"></script>
<script>
var aoy = Aoy.init();
var store = aoy.store;
var el = aoy.el;
</script>

Examples

Api

aoy.init

init function returns a aoy instance.

aoy.el(selectors, props, children])

return a Virtual DOM.

var span = el('span','this is p') // render <span>this is p</span>
var p = el('div',[ span ]) // render <p><span>this is p</span></p>
var div = el('div#mydiv.classA.classB') // 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.get('inputStore');
var myinput = aoy.createComponent({
    inputFn: function(){
        
    },
    render: function(){
        return el('Input', {
                        oninput: this.inputFn,
                        placeholder: this.inputStore.value,
                        type: 'text' 
                });
    }
});

aoy.connect(component[,stores])

when connect function is called, Virtual DOM will be rendered immediately.

var aoy.connect(mycomponent, 'a') // mycomponent denpend on a.
var aoy.connect(mycomponent, ['a', 'b']) // mycomponent denpend on a and b.

store

aoy instance provides a store.

var aoy = Aoy.init();
var store = aoy.store;

store.add([key ,] data)

function add is used to save data. if no key, this data's key is _DEFAULT.

aoy.store.add('a',{b:1}) // a:{b:1}
aoy.store.add({b:1}) // _DEFAULT:{b:1}

store.get(key)

Return to the corresponding store's data

aoy.store.add('a',{b:1})
aoy.store.get('a') // return {b: 1}

sotre.set(newData)

update data.

aoy.store.add('a',{b:1})

aoy.store.get('a').set({a:1, b:2}) //same: aoy.store.get('a') = {a:1, b:2}

aoy.store.get('a') // 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 .

License

MIT