# The Simple Framework

Javascript

    <tsf-example>
            <input tsf-value="this.counter" type="text"></input>
            <button tsf-bind-function-click="this.click">Counter++</button>
            <p tsf-html="'The counter is :' + this.counter"></p>
        </tsf-example>

        <script src="./the-simple-framework.js"></script>
        <script>
            TSFRepository.registerComponent(class Example extends TSFComponent {
                constructor () {
                    super();
                    this.state.counter = 0;
                }

                click(e) {
                    this.state.counter += 1;
                }
            });
        </script>

Result

### Angular-like functionality without all the fuss

Download Zip View on Github

## Create components using custom elements

    <tsf-example></tsf-example>
    <script>
        TSFRepository.registerComponent(class Example extends TSFComponent {
            constructor() {
                super();
            }
        });
    </script>

## One- and two-way bindings via state

    constructor() {
        super();
        this.state.persons = [{
            name: "Roland Brice",
            age: 39,
            children: [
                "Namond"
            ]
        },
        {
            name: "William A. Rawls",
            age: 58,
            children: [
            ]
        }];
    }

## Wide range of functionalities via custom attributes

    <tsf-example>
        <div tsf-for-of="person of this.persons">
        <div>
            <p>ID: <span tsf-html="local.person:index"></span></p>
            <p>Name: <span tsf-html="local.person.name"></span></p>
            <p tsf-html="'Age: ' + local.person.age"></p>
            <h3 tsf-if="local.person.children.length > 0">Children: </h5>
            <div tsf-for-of="child of local.person.children">
                <p tsf-html="local.child"></p>
            </div>
        </div>
    </div>
    <tsf/-example>

Check out the docs for detailed information.

Visit my Github or send me an email if you found bugs or miss a feature.