Components talk

index.js

var fastn = require('fastn')({
    _generic: require('fastn/genericComponent'),
    list: require('fastn/listComponent'),
    text: require('fastn/textComponent')
});

window.data = {
    foo:'bar',
    name: 'ROOT',
    children: [
        {
            name: 'bob',
            children: [
                { name: 'mary', children: [] }
            ],
        }
    ]
};


var createChildrenList = function(){
    return fastn('div',
        'Name', fastn.binding('name'),
        'Thing',

        fastn('input', {
            value: fastn.binding('foo').attach(window.data),
            onkeyup: 'value:value'
        }),
        fastn('list', {
            tagName: 'ul',
            items: fastn.binding('children'),
            template: function(model){
                return createChildrenList().binding('item');
            }
        })
    );
}

var thing = fastn('list', {foo:'bar'},
    createChildrenList()
);

thing.attach(window.data);

thing.render();


window.addEventListener('load', function(){
    document.body.appendChild(thing.element);
});