Test suite that runs http://slashhashbang.com/demos/viewframework

ViewLayoutTests.js

// @browsertest-depend library.js.rm.models.Model.js
// @browsertest-depend library.js.view.View.js
// @browsertest-depend library.js.view.mixin.Skeleton.js
// @browsertest-depend test.js.library.view.GraphPersonDirectoryFixture.js
// @browsertest-depend test.js.library.view.ViewDemo.html
// @browsertest-depend test.js.library.view.ViewDemo.css

module('View.Layout');

function defineViews() {
    var View = Jecture.get('ViewFactory');

    // create some base implementations
    View.define('BaseView', {
        childConfig: {
            header: 'HeaderView'
        },
        construct: function() {
            this.bind('childAdded:header', function(child) {
                $(child.el).prependTo(this.el);
            }, this);
        }
    });
    View.define('BaseListItem', {
        className: 'list-item',
        render: function() {
            $(this.el).html(this.renderSkeleton());
        }
    }, {
        mixins: ['View.Skeleton']
    });

    // set up grid view
    View.defineFrom('BaseView', 'GridView', {
        el: '#layout-grid'
    });
    View.defineFrom('BaseListItem', 'GridItemView', {
        viewContainer: 'GridView',
        skeleton: 'griditem'
    }, {
        viewModel: 'GraphPerson'
    });

    // set up list view
    View.defineFrom('BaseView', 'ListView', {
        el: '#layout-list',
        childConfig: {
            header: 'HeaderView', // deep extend would be useful here
            listItems: 'ListItemView'
        }
    });
    View.defineFrom('BaseListItem', 'ListItemView', {
        tagName: 'li',
        viewContainer: 'ListView',
        skeleton: 'listitem'
    }, {
        viewModel: 'GraphPerson'
    });

    // header view
    View.define('HeaderView', {
        tagName: 'h3',
        content: 'Cool Kids Club'
    });
}

function defineModels() {
    var people = Jecture.get('GraphPersonDirectory'),
        indx   = 0;

    Jecture.set(function() {
        if (indx === people.length) indx = 0;

        var person = people[indx++];
        person['picture'] = 'https://graph.facebook.com/'
            + person.id + '/picture';
        return new rm.models.Model(person);
    }, 'GraphPerson', {
        creationMethod: 'call'
    });
}

test('Can attach to html', function() {
    defineViews();
    defineModels();

    // Boot up view containers
    // (could also be bound to models so we don't have to create)
    Jecture.get('GridView');
    Jecture.get('ListView');

    // can override options during instantiation if you want
    Jecture.get('HeaderView', {
        viewContainer: 'GridView'
    });
    Jecture.get('HeaderView', {
        viewContainer: 'ListView'
    });

    // start model spout
    setInterval(function() {
        Jecture.get('GraphPerson');
    }, 3000);

});