If you just come up to this post, you should understand that this post is part of a series of posts talking about Javascritp, you can find the other posts in this series here. In the previous posts, I introduced the general idea of this project, I also talked about the concepts of Controllers and Models of the partten MVC, now it is time to talk about the View.

As the name suggest, the View is the part of the MVC that show up the data from Model to the user, in this case I want to add an new task to our to do list table, by a click in the button “Add Task”. The View is the class below. The core of the View is the “String template” that I am using in between the lines 8 and 27.

The point about the String Template is that it allows us insert an expression in the String, in this case, I am using this resource to run a function that will return a String with the html code of the tasks added by the user, the function that I used is in the lines from 18 up to 24, it is the map function. The map function is a function of the class array in javascript. The function map interact with each one of the elements in the array applying the function passed as a parameter, and then return a brand new array with olds elements replaced by the new elements results of the interaction of each one of elements with the function passed by argument to the map function. In this case, I got the array of tasks and create a new html table line in for each one of them, however, as I said, the map function return a array, so in the line 24, I used the function join to get a string from the array created by the function map. This idea of store and handle with DOM element in the code instead of directly in the DOM is implemented namy MVC framework as Angular and React, this idea is commonly called shadow DOM, and the idea is void frequent calls to the DOM, once calls to the DOM are not that fast.

The communication between the Model and the View is made in the controller by calls to the View passing the array of tasks to the View, in the function addToDo, as you can see in the line 18 of the code below, and as you can see in line 10 of the constructor, where I setup the View passing the empty array of tasks to the View.

Ok, so that is all for today, you can see the code of this project in my github repository, in the next post I will use a callback function to get tasks saved in the backend. Of course, if you have any question, please, let me know.

Leave a Reply

Your email address will not be published. Required fields are marked *