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
andshowMenu
fall under theview
orcontroller
? - 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
ormodel
? - 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();
});