Skip to content

Instantly share code, notes, and snippets.

@meddulla
Created May 11, 2011 10:44
Show Gist options
  • Save meddulla/966270 to your computer and use it in GitHub Desktop.
Save meddulla/966270 to your computer and use it in GitHub Desktop.
js simple mvc
if (typeof JE === 'undefined') {
JE = {};
}
/*
* Usage:
* agenda = JE.events.controller.init();
* Controller inits events, gets data from model, model on success updates view
*/
JE.events = (function() {
// Create closure
// Declare controller, model, views, helpers as local
var data = {};
var Controller = {
init: function(){
//set vars
data.year = parseInt($("#agenda-year").text(),10);
data.month = parseInt($( $("#agenda-months .titlesmall").get(0) ).attr('title'),10);
data.container = $("#agenda");
data.pageNr = 1;
data.hasMoreResults = true; //assumption
data.isLoading = false;
//events
$(".monthheader").click(function () {
data.container.html('A carregar..');
data.month = parseInt($(this).attr('title'),10);
data.pageNr = 1;
data.hasMoreResults = true;
Model.get(data.year, data.month, data.pageNr);
$(".monthheader").removeClass('titlesmall');
$(this).addClass('titlesmall');
return false;
});
$("#agenda-menos-ano").click(function () {
data.container.html('A carregar..');
var prevyear = data.year - 1;
data.year = prevyear;
$("#agenda-year").text(prevyear);
data.month = 12;
data.pageNr = 1;
data.hasMoreResults = true;
Model.get(data.year, data.month, data.pageNr);
$(".monthheader").removeClass('titlesmall');
$("#month12").addClass('titlesmall');
return false;
});
$("#agenda-mais-ano").click(function () {
container.html('A carregar..');
var nextyear = data.year + 1;
data.year = nextyear;
data.hasMoreResults = true;
$("#agenda-year").text(nextyear);
data.month = 1;
data.pageNr = 1;
Model.get(data.year, data.month, data.pageNr);
$(".monthheader").removeClass('titlesmall');
$("#month01").addClass('titlesmall');
return false;
});
$(window).scroll(function(){
//detect when user has scrolled to end of content
var bottomList = $("#agenda_paginator");
var viewTop = $( window ).scrollTop();
var viewBottom = (viewTop + $( window ).height());
var absoluteBottomList = Math.floor(bottomList.offset().top + bottomList.height());
var scrollBuffer = 150;
if ((absoluteBottomList - scrollBuffer) <= viewBottom){
if (data.hasMoreResults && !data.isLoading) {
data.isLoading = true;
//if so, get current month paged data
data.pageNr = data.pageNr + 1;
Model.get(data.year, data.month, data.pageNr);
}
}
});
return this;
}
};
var Model = {
get: function(year,monthnum, page){
var url = 'agenda/ws_get/' + year + '/' + monthnum + '/' + page;
$.ajax({
type:"GET",
url: url,
dataType:'json',
success: function(dataObj){
if (dataObj.length < 1) {
data.hasMoreResults = false;
View.list(false);
} else {
View.list(dataObj);
}
data.isLoading = false;
},
error: function(dataObj){
data.hasMoreResults = false;
data.isLoading = false;
View.list(false);
}
});
}
};
var Helpers = {
translateWeekday: function (day){
weekDays = {'Sunday':'Domingo',
'Monday':'Segunda',
'Tuesday':'Ter&ccedil;a',
'Wednesday':'Quarta',
'Thursday': 'Quinta',
'Friday': 'Sexta',
'Saturday': 'S&aacute;bado'
};
return weekDays[day];
}
};
var View = {
list: function(list){
if (!list) {
if (data.pageNr < 2) {
data.container.html('Sem eventos');
}
$('#agenda_paginator').html('');
return;
}
t = list.length;
if (data.pageNr < 2) {
data.container.html('');
}
for(i=0;i<t;i++){
var item = list[i];
//does container have a day div
var day = item.eventyear+item.eventmonth+item.eventday;
if ($('#agenda_'+day).size() < 1) {
//if not append html of day
html = View.partials.day(item);
data.container.append(html);
}
//prepend html of event
html = View.partials.event(item);
$('#agenda_'+day).prepend(html);
}
return true;
},
partials: {
day : function(item){
var eventDate = item.eventyear+item.eventmonth+item.eventday;
html = '<p><span class="agenda-date"><span class="">'+
eventDate.substring(6,8) +
'</span>' +
Helpers.translateWeekday(item.eventweek) +
'</span></p><div class="agendabody" id="agenda_' +
eventDate +
'"><p></p><br class="clear"></div>';
return html;
},
event: function(item){
html = '<strong class="title">'+item.title+'</strong>'+item.body;
return html;
}
}
};
// return object thats assigned to JE.events
return {
controller: Controller,
model: Model,
view: View,
helpers: Helpers,
data: data
};
})();
@meddulla
Copy link
Author

not classic mvc. code is called by
$(document).ready(function(){
JE.events.controller.init();
});

So controller inits events, which call model, model then updates view. So the workflow is Controller -> model -> view and not Controller -> model -> controller -> view.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment