HTML and CSS Reference
In-Depth Information
/**
* Add an event listener to the window so that when
* it's resized, it will clear the timeout
*/
window.addEventListener('resize', function(){
// Clear the timeout just in case it's set, to prevents multiple calls
clearTimeout(timeout);
/*
* Set the timeout to 100ms and execute fixdeckheight at the end of
* the timeout
*/
timeout = setTimeout(function(){ fixdeckheight(); }, 100);
});
// Call fixdeckheight for the first time
fixdeckheight();
})();
As you can see from the code comments, the self-executing function contains a
method called
fixdeckheight
. This simply sets the height of the deck to be the
size of the viewport, taking into account the size of the taskbar. The event
listener will listen for the resize event to fire and call the
fixdeckheight
function.
A timer is used, as the viewport size isn't immediately available when the
resize
event is fired.
The View
When I first encountered views in MVC for JavaScript, I assumed that the view
was simply a piece of HTML defined on an HTML web page, just like MVC in
PHP. My ideas on views have since evolved. The best explanation that I can
give for a view in JavaScript MVC is that it is a piece of HTML that will be reused
within your application.
The view may contain some kind of logic, but not much. The idea behind a view
is that no piece of HTML is ever visible in a model or controller. With this in
mind, the view is usually a piece of HTML, encapsulated in a JavaScript object,
with logic to modify it before it's rendered. The controller will create a new view
object and pass appropriate variables to the constructor. An example of a view
object is as follows.
var view = function(name){
/**
* Create a root element. This allows you to add to it using innerHTML
* so that you don't need to manually create new DOM elements for large
* chunks of HTML.
