HTML and CSS Reference
In-Depth Information
We can take the HTML used in the original HTML file to create the views for us.
There are three views in the MoMemo application:
movielistitem
,
movielist
,
and
movie
. We'll discuss these next.
The Movie List Item View
The movie list item view is quite simple. Rather than having to create the same
movie list item for various movie lists in the future, the movie list item view can
be used in different movie lists to avoid having to rewrite the POSH for every
view.
Create a new file within
js/app/view
called
movielistitem.js
. (If the folder
doesn't exist, then create it.)
Add the following code to the file.
var app = app || {};
app.view = app.view || {};
/**
* Creates a new view for a movie list item
* @param {app.model.movie} movie
*/
app.view.movielistitem = function(movie){
var _movie = movie,
_rootElement = document.createElement('li');
_rootElement.innerHTML = [
'<a data-controller="movies" data-action="find"
data-params="{"id": "', movie.getRtid() ,'"}"
class="more" href="movie/view/", movie.getRtid() ,'">',
'<div class="preview-image">',
'<img src="', movie.getPosterframe(), '" alt="',
movie.getTitle(), '" height="82" />',
'</div>',
'<h2>', movie.getTitle(), '</h2>',
'<p>', movie.getSynopsis(), '</p>',
'</a>'
].join('');
this.render = function(){
return _rootElement;
}
}
As you can see, it follows the same standard structure as a regular view. The
root element is a list item (
li
), and the view accepts a movie model. Within the
array for the POSH, you can see that array value separators (commas) are used
