This entry is part 12 of 14 in the series for A Complete Guide for Learning Backbone Js
- Introduction and Installation
- Defining Models in backbone js
- Adding Validations in models backbone js
- Explaining views in backbone js
- How to use templates in backbone js
- How to improve templates in backbone js
- Collections in backbone js
- Collection views in backbone js
- Template helpers in backbone js
- How to use namespace in backbone js
- How to handle dom events in backbone js and define your custom events (Live Demo)
- Routing in backbone js
So here we are, DOM events in backbone js. I got 8 emails so far requesting for a lesson to understand DOM events in backbone js. To all of them I just replied, I have that thing in my list. Just wait a little and another thing was why you are doing everything on console. I want to something on browser window too. For those folks here is the first episode when we are doing something on browser window. Anyways. Coming back to the lesson. We want to add code for listening to dom events in backbone js. What will be done in this lesson
- You can see list of people
- You can click on any person and edit his/her name
- You can add a new person
- You can delete a person record.
You can see a [live demo of final outcome here]. : http://listen-dom-events-backbone.herokuapp.com/ “ Listening to Dom events in backbone js”
What we have till now
- We have Person, PersonView, PeopleCollection, PeopleCollectionView
- App namespace
- Template a personView
- We learnt validations, although we are not using that in our sample codes.
I am starting the application with this code and I hope you can understand all of it very easily. If not then checkout the previous lessons.
Adding a listener for click event
So very first thing that we want to do is: listening to click event on a particular person record. This is simple to do in PersonView (check inline comments)
Lets move to browser and lets see what happens when we click on a person record.
A useful tip: What if you just want to trigger click only for the name of the person not on age or occupation ie some internal element. Pretty easy..
Ok, so we got the basic idea how to add dom events in our PersonView. We can add all other events like dblclick, mouseover etc.
Lets move ahead and removing all the code we added for click event etc. Lets first modify our template ie personTemplate and add two button edit and delete.
Lets head back to console to see what we have.
So now we do have two buttons for each row, edit and delete, which don’t do anything but we have them. So now head back to your PersonView and add events for these two one by one.
For edit we need to do these things:
- Get the previous Content
- Take new user input
- Update the view with new content
Lets add click events and getting new values.
Trying this on browser.
- Loading the page will display three people record
- Click on edit and lets update the name of the user using promt
- Again call render and append peopleView in dom. ie $(document.body).append(peopleView.render().el);
Cool, So now we want whenever we change the name of the person, it should just update the view of that person. We can do this just by binding a function (also known as listeners). So just simply bind onchange event in PersonView like this:
So basically we are re-rendering the personView whenever its model is changing. Now hit refresh and try to change the name of the person using prompt. It will just re-render the view automatically :) Cool naa..!!!
But the problem is when you hit cancel.. boom.. Check the code with inline comments…
Another way of doing this can be setting validations that we learnt in lesson 4 ie validations in models Also add valdiations by trimming the white spaces etc.
So thats supercool for editing a person name. Now lets move ahead and add a functionality for deleting a record.
Deleting a record:
- Lets first bind a delete click
- Now call a destroy method which will destroy the object
- Add a listener for destroy
- Remove the element from DOM, will be called by listner
Here is the code for that, pretty simple. (Check inline comments..)
I hope are with me without losing the grip of the what happening here.
Lets do add a new person record.
So lets create a simple form in index.html ie
Now we need to do these things:
- Create a newView for newPerson and Read value from the textbox
- Create a new model instance
- Add into the collection
- Render the new collection
So pretty simple: Defining a new view for record
We are adding person to collection to adding listeners for it.
Hit refresh and now try add, edit and delete. Super Cool ;) Thats all about listening to dom events in backbone js and so called mini project.
If you are facing any issues. Checkout the source code files at github. I will be creating more and more directories in the same repo regarding each post. Still if you have any doubts you can comment on the blog post itself and I will try to reply back asap.