3
\$\begingroup\$

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();
});
\$\endgroup\$
1
\$\begingroup\$

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

\$\endgroup\$
  • \$\begingroup\$ What exactly is the "data" that the model should contain? If I grab a file through AJAX, to me that is data that I've retrieved. Or is that really just HTML (if it's a normal HTML page) and therefore it belongs in the view? What if I make a call to an API and the response is a JSON? Does that then fall under "model"? \$\endgroup\$ – Chrillewoodz Jan 20 '15 at 13:51
  • \$\begingroup\$ Why does viewNewPage fall under controller? That function updates the view, so shouldn't it be in the view? \$\endgroup\$ – Chrillewoodz Jan 20 '15 at 13:58
  • \$\begingroup\$ "Data" is normally not markup but somewhat structured json or xml. But in this case I guess your pages could be considered as data. viewNewPage could go both into the controller and the view. The larger change, the bigger reason to put it in the controller. \$\endgroup\$ – Aspelund Jan 20 '15 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.