storable-react/test3.js

React bindings for the Storable library

import React from "react";
import Inventory from "storablejs/Inventory";
import Store from "storablejs/Store";
import Manager from "storablejs/Manager";
import Connect from "./Connect";
import StoreDebugger from "./StoreDebugger";

const SubApp = React.createClass({
    render() {
        return (
            <div>
                <div>{this.props.hoo}</div>
                <div>{this.props.dooky}</div>
            </div>
        )
    }
});

export default React.createClass({
    render() {
        const i = new Inventory();
        const m = new Manager(i);
        const s = new Store(i, m);

        i.contents.forEach(function(state) { console.log("STATE:", state)});

        function TestModel2() {
            this.thing = function() {};
        }

        function TestModel() {
            this.a = new TestModel2();
            this.b = 123;
            this.c = "This is a string";
            this.d = true;
            this.e = {};
            this.f = [1,2,3];
        };

        window.doNext = function() {
            s.emit({
                foo: {bar: Math.ceil(Math.random() * 100)},
                baz: "heelo",
                hoo: new TestModel(),
            })
        }

        return (
            <div>
                <Connect store={s}
                         keyPaths={[["foo", "bar", {alias: "hoo"}],
                                    ["hoo", "f", {alias: "dooky"}]]} >
                    <SubApp />
                </Connect>
                <StoreDebugger manager={m} />
            </div>
        )
    }
});