Created
May 11, 2011 10:44
-
-
Save meddulla/966270 to your computer and use it in GitHub Desktop.
js simple mvc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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ça', | |
'Wednesday':'Quarta', | |
'Thursday': 'Quinta', | |
'Friday': 'Sexta', | |
'Saturday': 'Sá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 | |
}; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.