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
* 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
* array into a string with no spaces.
_rootElement.innerHTML = [
'<p>Hello, my name is ', name, '</p>'
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.
Search WWH ::

Custom Search