JS Data binding

JS lib for bidirectional data binding written in ES6.

Binding examples

Demo in action here.

Cyclical bindings

HTML

<inputid="foo"/><inputid="bar"/><inputid="moo"/>

JS

import{dom,obj}from'./bind';letmodel=obj({foo: {bar: 'hello',baz: 'world'},moo: 666});model.foo.bar.bind(dom('#foo'),dom('#bar'));model.foo.baz.bind(dom('#moo'),dom('#bar'),model.moo);model.moo=Array(4).join('wat'-1);dom('#foo').append(' Batman!');console.log(model);

Simple

HTML

<inputid="first"/><inputid="second"/><inputid="third"/>

JS

import{dom,val}from'./bind';letvariable=val('TEST ').bind(dom('#first'),dom('#second'),dom('#third'));lettime=0;setInterval(_=>variable.append(`${time++} `),500);

Component examples

JS

classMessage{template({ text, type ='info'}={}){return`<h1 class="${type}">${text}</h1>`;}}classHomePage{constructor(){this.title='Home page';}template({ style },{ render }){return$.async` <h1 class="${style}">${this.title}<h1> <hr/> <div class="body">${render(Message,{text: 'hello world'})} </div> `;}}new$().render(HomePage,{style: 'dark'}).then(console.log);

Output

<h1class="dark">Home page<h1><hr/><divclass="body"><h1class="info">hello world</h1></div>