HTML and CSS Reference
In-Depth Information
this.render = function(){
return _rootElement;
}
}
As you can see, the view constructor accepts an array of results. No error
checking is done within this view to verify each model within the array, but you
can use the validator utility to enforce this. From the code, you can see that the
root element is an unordered list.
_rootElement = document.createElement('ul');
_rootElement.classList.add('list');
_rootElement.classList.add('movie-list');
From here, several classes are added for styling later.
You then loop through each model within the array and create a new
movielistitem
object with the model. It's then simple to append the
movielistitem
by calling the
appendChild
method and rendering the list item.
for(var i = 0; i < results.length; i++){
var itemView = new app.view.movielistitem(results[i]);
_rootElement.appendChild(itemView.render());
}
The result is an unordered list filled with a list of movies.
The Movie View
The movie view simply holds the full view for the movie when a user taps on a
movie item from their favorites or a search. It's slightly more complicated than
the other views, as it side scrolls so that a user can get more information about
a movie. This works especially well when you want to add new content blocks
for a model. There is a limit, however, as adding too many blocks and side
scrolling forever can be a pain for the user.
As it's quite a large view, we'll go through it line by line.
First, create the standard view object layout in
js/app/view/movie.js
with the
following code.
var app = app || {};
app.view = app.view || {};
/**
* Creates a new view for a movie list item
* @param {app.model.movie} movie
*/
