Portfolio landing page

Question

I'm trying to grasp this whole MVC design pattern idea but I'm in the dark if I'm doing it correct. This is where I need some feedback on what I've done so far. Here's what I'm wondering:

• Does the hideMenu and showMenu fall under the view or controller?
• Have I put viewNewPage in the correct block?
• How can I make the animation of the menu boxes less repetetive but still allow jQuery to wait until all of the animations have been run before updating the view with the new page? This should probably be done via a class containing CSS3 animations but I'm really unsure on how to rewrite it.
• Should I bind elements to functions in the controller or model?
• Have I made any other blunders here when trying to follow the MVC pattern?

Simple markup:

<main class="ignore-markup content">
    <div id="nav-wrapper">
        <nav class="ignore-markup">
            <div id="portfolio" class="nav-box hoverable" data-href="portfolio">
                <h1>Portfolio</h1>
            </div>
            <div id="biography" class="nav-box hoverable" data-href="biography">
                <h1>Biography</h1>
            </div>
            <div id="blog" class="nav-box hoverable" data-href="blog">
                <h1>Blog</h1>
            </div>
            <div id="logo" class="nav-box">
                <h1>Logo here</h1>
            </div>
            <div id="contact" class="nav-box hoverable" data-href="contact">
                <h1>Contact</h1>
            </div>
            <div id="snippets" class="nav-box hoverable" data-href="snippets">
                <h1>Snippets</h1>
            </div>
        </nav>
    </div>
</main>

jQuery:

$(document).ready(function() {

var model = {
    elements: {
        wrapper: $('main.content'),
        portfolio: $('#portfolio'),
        biography: $('#biography'),
        blog: $('#blog'),
        logo: $('#logo'),
        contact: $('#contact'),
        snippets: $('#snippets')
    },
    getPage: function(href) {

        return $.ajax({
            url: '../includes/pages/' + href + '.php',
            type: 'post'
        });
    }
}

var view = {
    viewNewPage: function(promise) {

        promise.done(function(data) {
            model.elements.wrapper.append(data).hide().fadeIn();
        });
    }
}

var ctrl = {
    hideMenu: function() {

        var box = $(this);
        var href = box.data('href');

        model.elements.portfolio.animate({top: '-50%'}, 500);
        model.elements.biography.animate({top: '-70%'}, 500);
        model.elements.blog.animate({left: '-45%'}, 500);
        model.elements.logo.fadeOut('slow');
        model.elements.contact.animate({bottom: '-50%'}, 500);
        model.elements.snippets.animate({right: '-55%'}, 500, function() {
            var promise = model.getPage(href);
            view.viewNewPage(promise);
        });
    },
    setElementBindings: function() {
        model.elements.wrapper.on('click', '.hoverable', ctrl.hideMenu);
        model.elements.wrapper.on('click', '.home', ctrl.showMenu);
    },

    showMenu: function() {

        var wrapper = model.elements.wrapper.children('.wrapper');

        wrapper.fadeOut('fast', function() {
            wrapper.remove();
        });

        model.elements.portfolio.animate({top: 0}, 500);
        model.elements.biography.animate({top: 0}, 500);
        model.elements.blog.animate({left: 0}, 500);
        model.elements.logo.fadeIn('slow');
        model.elements.contact.animate({bottom: 0}, 500);
        model.elements.snippets.animate({right: 0}, 500);
    }

}

ctrl.setElementBindings();
});

Answer 1

Does the hideMenu and showMenu fall under the view or controller?

UI only changes could definitely be put in the view.

Have I put viewNewPage in the correct block?

I would put data changing code in the controller, so no.

Should I bind elements to functions in the controller or model?

I would bind elements to events in the view.

Have I made any other blunders here when trying to follow the MVC pattern?

The view is a combination of the view javascript and the corresponding html. The html selectors shouldn't exist outside of the view, and absolutely not in the model.

model.elements => view.elements

hideMenu, showMeny, setElementBindings => view

viewNewPage => controller