Nest Y.App POC

app.js

YUI({
    modules: {
        'router': {
            fullpath: 'router-fixes.js',
            requires: ['array-extras', 'base-build', 'history'],
            optional: ['querystring-parse']
        }
    }
}).use('app-base', 'app-transitions', function (Y) {

    // -- App Fixes ------------------------------------------------------------
    Y.App.ServerRoutingDefault = function () {};
    Y.App.ServerRoutingDefault.ATTRS = {
        serverRouting: {
            valueFn: function () {
                return Y.App.serverRouting;
            }
        }
    };

    Y.Base.mix(Y.App, [Y.App.ServerRoutingDefault]);

    // -- FooApp ---------------------------------------------------------------
    Y.FooApp = Y.Base.create('fooApp', Y.App, [], {
        navTemplate: '<p><a href="{root}one/">Foo One</a> <a href="{root}two/">Foo Two</a></p>',

        views: {
            one: {type: 'FooOneView'},
            two: {type: 'FooTwoView'}
        },

        initializer: function () {
            this.dispatch();
        },

        render: function () {
            Y.FooApp.superclass.render.apply(this, arguments);

            var root = this.get('root');

            this.get('container').prepend(Y.Lang.sub(this.navTemplate, {
                root: this.get('html5') ? root : ('#' + root)
            }));

            return this;
        },

        showRoot: function () {
            this.showView(null);
        },

        showOne: function () {
            this.showView('one');
        },

        showTwo: function () {
            this.showView('two');
        }
    }, {
        ATTRS: {
            container: {
                valueFn: function () {
                    return Y.Node.create('<div class="foo" />');
                }
            },

            routes: {
                value: [
                    {path: '/',     callback: 'showRoot'},
                    {path: '/one/', callback: 'showOne'},
                    {path: '/two/', callback: 'showTwo'}
                ]
            }
        }
    });

    // -- FooOneView -----------------------------------------------------------
    Y.FooOneView = Y.Base.create('fooOneView', Y.View, [], {
        render: function () {
            this.get('container').set('text', 'Foo One!');
        }
    });

    // -- FooTwoView -----------------------------------------------------------
    Y.FooTwoView = Y.Base.create('fooTwoView', Y.View, [], {
        render: function () {
            this.get('container').set('text', 'Foo Two!');
        }
    });


    // -- BarApp ---------------------------------------------------------------
    Y.BarApp = Y.Base.create('barApp', Y.App, [], {
        navTemplate: '<p><a href="{root}one/">Bar One</a> <a href="{root}two/">Bar Two</a></p>',

        views: {
            one: {type: 'BarOneView'},
            two: {type: 'BarTwoView'}
        },

        initializer: function () {
            this.dispatch();
        },

        render: function () {
            Y.BarApp.superclass.render.apply(this, arguments);

            var root = this.get('root');

            this.get('container').prepend(Y.Lang.sub(this.navTemplate, {
                root: this.get('html5') ? root : ('#' + root)
            }));

            return this;
        },

        showRoot: function () {
            this.showView(null);
        },

        showOne: function () {
            this.showView('one');
        },

        showTwo: function () {
            this.showView('two');
        }
    }, {
        ATTRS: {
            container: {
                valueFn: function () {
                    return Y.Node.create('<div class="bar" />');
                }
            },

            routes: {
                value: [
                    {path: '/',     callback: 'showRoot'},
                    {path: '/one/', callback: 'showOne'},
                    {path: '/two/', callback: 'showTwo'}
                ]
            }
        }
    });

    // -- BarOneView -----------------------------------------------------------
    Y.BarOneView = Y.Base.create('barOneView', Y.View, [], {
        render: function () {
            this.get('container').set('text', 'Bar One!');
        }
    });

    // -- BarTwoView -----------------------------------------------------------
    Y.BarTwoView = Y.Base.create('barTwoView', Y.View, [], {
        render: function () {
            this.get('container').set('text', 'Bar Two!');
        }
    });


    // -- Main App -------------------------------------------------------------

    // Set globally for everything!
    Y.App.serverRouting = false;

    var app = new Y.App({
        views: {
            foo: {
                type    : 'FooApp',
                preserve: true
            },

            bar: {
                type    : 'BarApp',
                preserve: true
            }
        },

        root: '/',
    });

    app.navTemplate = '<p><a href="{root}foo/">Foo App</a> <a href="{root}bar/">Bar App</a></p>';

    app.render = function () {
        Y.App.prototype.render.apply(this, arguments);

        var root = this.get('root');

        this.get('container').prepend(Y.Lang.sub(this.navTemplate, {
            root: this.get('html5') ? root : ('#' + root)
        }));

        return this;
    };

    app.route('/foo/*', function (req) {
        this.showView('foo', {root: '/foo/'});
    });

    app.route('/bar/*', function (req) {
        this.showView('bar', {root: '/bar/'});
    });

    app.on('navigate', function (e) {
        var activeView = this.get('activeView');

        if (activeView && activeView.hasRoute(e.url)) {
            e.preventDefault();
        }
    });

    app.render().dispatch();


    // -- Sigling App ----------------------------------------------------------
    var silbingContainer = Y.Node.create('<div />'),
        sibling;

    sibling = new Y.App({
        container    : silbingContainer,
        viewContainer: silbingContainer,
        linkSelector : null
    });

    sibling.route('*', function (req) {
        this.get('container').set('text', req.path);
    });

    sibling.render().get('container').appendTo('body');
    sibling.dispatch();

});

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Multiple Y.Apps</title>
</head>
<body>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    <script src="apps.js"></script>
</body>
</html>

router-fixes.js

// See: https://gist.github.com/2725665