HTML and CSS Reference
In-Depth Information
app.bootstrap = (function(){
/**
* Create the controller object
* You explicitly declare the movies and favorites
* controllers
*/
var _controller = {
movies: null,
favorites: null
}
})();
This will hold the controller objects. It's a good idea to explicitly create this so
that you know which controllers should exist within your application.
The next step is to create a click event listener for the whole document. This will
pick up any taps and check to whether the element tapped is a link with a
request to trigger an action within a controller.
var app = app || {};
app.bootstrap = (function(){
...
/**
* Add a click event listener over the entire document
* It will delegate clicks for controllers to the
* controller and action
*/
document.addEventListener("click", function(event){
});
})();
When you tap an item on the screen, the event listener won't necessarily return
the link that you tapped on; it will more than likely return an element within the
link itself. As you will want to grab data from the link itself, you will need to
traverse up the DOM tree to either grab the link and set it as the target or set the
target as null if the user didn't tap on a link.
To do this, you will need to create a
while
loop. This will assign the target to the
current target's parent and gradually loop up the DOM tree. If the target is a link,
contains the data-controller attribute, and has a data-action attribute, then it will
break out of the
while
loop and continue with the execution. If the DOM element
is the HTML element (at the top of the DOM tree) it will break out of the while
loop and assign the target to a null value as the link hasn't been found.
var app = app || {};
