Y.App rendering each view in a different element

Y.App.js

Y.HeaderView = Y.Base.create('header', Y.View, [], {
    ATTRS: {
        container: { value: '#header' }
    }
});

Y.BodyView = Y.Base.create('body', Y.View, [], {
    ATTRS: {
        container: { value: '#body' }
    }
});

Y.FooterView = Y.Base.create('footer', Y.View, [], {
    ATTRS: {
        container: { value: '#footer' }
    }
});

var app = new Y.App({
    views: {
        header: { type: Y.HeaderView },
        body: { type: Y.BodyView },
        footer: { type: Y.FooterView }
    },

    routes: {
        value: [
            {
                path: '/home',
                callbacks: function(req, res, next) {
                    app.showView('header');
                    app.showView('body');
                    app.showView('footer');
                }
            }
        ]
    }
});