Dissecting ToDos Part 1

As mentioned in the previous post, I completely love the ToDosMVC project. For such a simple project, the programmers/contributors put a lot of effort into making clean readable code. It really is a great resource to learn off from by studying it.

In today’s post, we’ll go straight to the code and get our hands dirty of the jQuery function.

http://todomvc.com/examples/jquery/

Actually before diving straight in, please give yourself 10 minutes to mess around with the features. The first step into learning off of anyone’s code is to get a picture of how the program works.

ToDos List Main Functionalities:
1) Delete
2) Modify
3) Add

If you have taken an algorithm course, you might understand that either delete or add functions are the simplest. In this case, I chose to analyze the delete function because it seemed the easiest.

Using google chrome’s developer tools, locate the delete function and simply run through it line by line.


destroy: function (e) {
this.todos.splice(this.indexFromEl(e.target), 1);
this.render();
}

Hurray, we found the delete function! Let’s go through this line by line.

destroy: function (e)
An event interface is passed through the destroy function

this.todos.splice(this.indexFromEl(e.target), 1);
We can assume [this.todos] is an array because splice is a method only used for arrays. If you’re not familiar with how splice operates, refer to MDN but basically it’s often used to remove an element from an array. However, you must know the index is located in.

Which we then run to an unknown method, “indexFromEl”. Luckily, for Chrome we can step into the function and check it out.

We will look through indexFromEl in the next post.

 

Thomas Nguyen

 

Leave a Reply

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