JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

piyo: <input data-bind="value:$data"/>
<button id="show-btn">Show!</button>

JavaScript

// observable
// create an observable object
// @param {Object} init initial value
var foo = sb.observable(100);
var bar = sb.observable(200);
var hoge = sb.observable(500);

// chain
// create a constraint chain
// @param {Object} inputs it has input observables as properties
// @param {Object} outputs it has input observables as properties
// @param {function} constraint it returns computed values as a object's properties
var chain = sb.chain(
    // input observables
    {foo: foo, bar: bar},
    // output observables
    {hoge: hoge},
    // constraint function
    function(input) {
        return {hoge: input.foo() + input.bar()};
    }
);

// bind
// regist to ChainMaster
// foo, bar -> hoge
chain.bind();

// unbind
// remote from ChainMaster
chain.unbind();

// foo --notify[]--> ChainMaster --notify[]-->
// chain --notify[chain]--> hoge(400)
foo(200);

// xchain
// create 3 chians
// @param {Object} observables it has observables as properties.
// @param {Object} constraints it has functions as properties.
// @return {sb.ChainSet}
var xchain = sb.xchain(
    // observables
    {foo: foo, bar: bar, hoge: hoge},
    // constraint functions
    {foo: function(input){
         return input.hoge() - input.bar();
     },
     bar: function(input){
         return input.hoge() - input.foo();
     },
     hoge: function(input){
         return input.foo() + input.bar();
     }}         
).bind();

// foo(200) --notify[fooChain]--> ChainMaster
// --notify[fooChain]--> barChain --notify[fooChain,barChain]--> bar(300)
//    --notify[fooChain, barChain]--> ChainMaster
//        --notify[fooChain, barChain]--> hogeChain
//            --notify[fooChain, barChain, hogeChain]--> hoge(500)
// TODO: it remains some anxieties
foo(200);

// a wrapper for ko.observable
// @param {ko.observable} observable observable object of knockoutJS
var piyo = sb.observable(ko.observable());
var piyopiyo = sb.observable();
sb.chain({piyo: piyo}, {piyopiyo: piyopiyo}, function(input) {
   ...