HTML and CSS Reference
In-Depth Information
app.view.movie = function(movie){
var _rootElement = document.createElement('div');
_rootElement.innerHTML = [].join('');
this.render = function(){
return _rootElement;
}
}
As you can see, the root element is a div . The first section that should be
created is the header for the movie view. This contains the posterframe, the
movie title, a button to add/remove the movie from your favorites, and the movie
release date.
...
app.view.movie = function(movie){
...
_rootElement.innerHTML = [
'<header class="movie-header">',
'<img src="', movie.getPosterframe() ,'" alt="', movie.getTitle() , '"
class="poster" width="100%" />',
'<hgroup class="movie-title">',
'<a href="#" class="btn-favorite add" data-controller="favorites"
data-action="add" data-params=\'{"id": "', movie.getRtid() ,'",
"title": "',
escape(movie.getTitle()) ,'", "synopsis": "',
escape(movie.getSynopsis()) ,
'", "posterframe": "', movie.getPosterframe() ,'"}\'>favorite</a>',
'<h2>', movie.getTitle(),'</h2>',
'<p class="movie-release-date">Cinematic Release - ',
movie.getReleaseDate().getCinema().getDate(), '/',
movie.getReleaseDate().getCinema().getMonth() + 1 , '/',
movie.getReleaseDate().getCinema().getFullYear() ,'</p>',
'</hgroup>',
'</header>',
].join('');
...
}
As you can see, the movie header <header /> contains the posterframe, which
spans the width of the header. It also contains the movie information such as
the title and release date. The Date object returns a month number starting from
zero, so you will need to increase its value by one to get the correct month
number.
movie.getReleaseDate().getCinema().getMonth() + 1 , '/',
 
Search WWH ::




Custom Search