It’s Saturday night, I’ve just seen Logan, the movie, what sad movie! Please don’t get me wrong, I liked it, it is a great movie, but oh my god, it is sad, then what could be better then talk about Javascript to feel happy! I know, I am weird, but talk about code is something that make me happy.

In the last post , I explained about the “To do list” application that we are building, where you can find its code in the github, I talked about the difference between Classes and Objects, I also introduced the idea of Model View Control and in the end I explained about our first model, the class Task.

Now it is time to talk about the Controller, in this case, the ControllerToDo. The ControllerToDo is defined in class below, and just like the class Task, it has its own constructor, in the case of the ControllerToDO, the constructor is in the lines 3 until line 8. The line 4 is very special, you can see the call “document.querySelector.bind(document)”, there are a lot of things going on this line, the first thing is the “document.querySelector“, what is an method to query the first element of the DOM that match with paramenter passed, then the method is stored in the variable “$”, if you know jquey, you must reconize it, but it is not a real JQuery implamentation, JQuery is more complex that just that, you can have a deeper look in JQuery code in this video of Paul Irish.

Now come the hard part, what separates the beginners…Ok I exaggerated a little bit, but if you understand it you will take a step important to became a JavaScript developer, so are you ready? Before we store the function “document.querySelector” in the variable “$”, I called the function bind, and I passed the document to it. The point here is: the function querySelector, is a function of the object document, a standard javascript object, inside of the function, they could have access to some resource of the object document, the problem is when we assign the method “querySelector” to the variable, the method loose the access to the document resources, that why we need the “bind” here, to bind the resources of “document” to the method “querySelector” even when this method is assigned to the variable “$”.

The next steps in the constructor of the ControllerToDo are the assign the variables to the controller properties, in the class Task we got the the values to initiate the class’s properties as parameters in the method, but in the controller, I am using the function “querySelector” stored in the variables “$” to do it. In the html below you can see the form that will be used to feed the tasks, the ids used in the inputs are title, description and date. As we did in the Task model, I am using the “_” notation to “indicate that those are private properties of the class ControllerToDo.

Now let look how to create new task in the controller, actually the controller have a method to create a new Task, the method “addToDo” will create a new Task, in the line one of the html you can see that I tied the method “addToDo” to the submission of the form, then in the first line of the method “addToDo” I used the “event.preventDefault();” to avoid the requested to be send to the server and refresh the whole page. So I create an object of the class Task in the lines 12 and 13 of the ControllerToDo, and finally, in the line 14, I logged the new Task object in the browser console, as you can see in the image below.


So far we were able to add a model and a controller to our “To Do” project, we saw how to create new Task in the controller using the html form, the next step should be take the Task object we created and to show it to the user, in the view. Hence, in the next post I will show you guys how to create a view using javascript. If you have any question, please let me know, I will be glad to help you!

Leave a Reply

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