Jacob Ruiz

View Original

Removing jQuery from TodoMVC's edit Method

Exercise

I'm going through the exercise of removing jQuery from TodoMVC's jQuery example. My strategy is to first remove it from the core methods like create, destroy, toggleAll, renderFooter, edit, etc. 

I will then remove it from the bindEvents method.

Today I removed jQuery from the edit method. I should note that there is one place where jQuery is still touching the edit method: edit takes an argument e which is a jQuery event. I've left this as is until I get to removing jQuery from the bindEvents method.

Here's what the edit method looks like with jQuery:

See this content in the original post

We can break out the chain of function calls into these steps:

See this content in the original post

Then we can fill in the steps with the vanilla JS equivalents.

See this content in the original post

Things I'm unsure about

1. The old code set input.value to input.value(). I don't see the purpose of this, and works without it, so I've removed it. If you see a reason why this needs to be there, please let me know in the comments.

2. The code has gotten quite a bit longer. Should I consider doing some chaining in order to shorten it? Instead I optimized for readability by breaking each step into it's own line (and adding comments.)

This is an exercise from Watch and Code's Premium course. Please head over there if you'd like to improve your Javascript skills.