HTML and CSS Reference
In-Depth Information
*/
var _rootElement = document.createElement('div');
/**
* You can use innerHTML here to add content to the root element. As you can
see,
* rather than concatenating a very long string, an array is used. This is
* cleaner and easier to read than a long string. .join('') is used to merge
the
* array into a string with no spaces.
*/
_rootElement.innerHTML = [
'<p>Hello, my name is ', name, '</p>'
].join('');
this.render = function(){
return _rootElement;
}
}
As you can see, the constructor accepts a parameter called
name
. You can have
any number of parameters you like, which can then be used in the view itself.
The second line creates a new element and assigns it to the
_rootElement
instance variable. This is useful, as a DOM parser won't be needed to traverse
the DOM for any new elements added to the root element.
The third line of code sets the
innerHTML
of the root element using an array. This
is preferable to using a long string, as it's far easier to read and maintain.
join('')
is used to merge the array into a string so that
innerHTML
can accept it.
The only privileged method within the view is
this.render
, which simply returns
the
_rootElement
. You can add methods later to manipulate the view after it has
been instantiated. To retrieve the complete view, you can run the
render
method
on the object from your controller, which will return a DOM object.
It's important to remember that views do not have to be full cards to be used
within a deck; they can also be partial views that are used within other views.
For instance, in MoMemo, there are two types of movie lists: favorite movies
and movie search results.
The presentation of the list itself might differ, but because the individual movie
rows are the same, it doesn't make sense to duplicate the HTML for each movie
list item. This is where using a view within a view comes in handy. Our controller
doesn't need to know how each type of list is rendered; the view is responsible
for that.
