HTML and CSS Reference
In-Depth Information
to separate the movie accessors from the POSH itself. This is much easier to
read and maintain than using concatenated strings. Within the link for the movie,
you can see that various data attributes have been created.
<a data-controller="movies" data-action="find"
data-params="{"id": "', movie.getRtid() ,'"}"
class="more" href="movie/view/", movie.getRtid() ,'">
The
params
will be used for the event delegate for the application to trigger
controller events/actions and pass parameters to them.
The rest of the code is quite simple and creates a list item to hold the movie's
title, synopsis, and preview image/posterframe.
The Movie List View
The movie list view is simply an unordered list used to hold the various movies.
In this application, the movie list view is used once for the favorites list and once
for the search results list. Again, this outlines the benefit of using views. If you
didn't create this view, you would have to create and maintain the same POSH
in two places within your application.
Create a new file within the
js/app/view/
folder called
movielist.js
and add
the following code.
var app = app || {};
app.view = app.view || {};
/**
* Creates a new view based on the search results
* @param {Array} results
*/
app.view.movielist = function(results){
var _results = results,
_rootElement;
// Create the root UL element
_rootElement = document.createElement('ul');
_rootElement.classList.add('list');
_rootElement.classList.add('movie-list');
for(var i = 0; i < results.length; i++){
var itemView = new app.view.movielistitem(results[i]);
_rootElement.appendChild(itemView.render());
}
