In the previous lesson, we learned how to use the collection in Backbone js. Now in this topic, we will learn how to generate collection views in Backbone js. Let’s start coding.
What we have till now
So from the previous lesson we have:
Three things we need
Person Model
Person View
Person Collection
So we have person model, person view, but the problem is we dont have collection view, a view that collects all smallers view and make it a complete giant view. Lets define one:
Defining a collection
We defined a PeopleView and as we are using li tag for small view is PersonView that why we defined tagName: ul in PeopleView. Now we need to define a render method which should be these functionalities.
Loop over all the person objects
Should call render for the person objects
Should display a collection as HTML
Defining render method
So lets just define our render method and implement all of the above functionality one by one.
Let’s create a new object i.e., peopleView and see few things on Chrome developer tools console. I have added initialize function in CollectionView and here is the code for main.js
Here is the result from console:
So what I can see is three objects in the collection view
Lots of functions that can be applied to collection views.
So let’s move ahead and use each function and loop over the collection view. Lets for now just run a loop.
So first step of looping is done. Now let’s move ahead of the second step i.e., Create a view for each person.
So far its fine. Now just hold a sec and checkout this carefully. “this” inside the loop lost the reference of the actual collection. Try out these two things to understand it a better way and checkout inline comments.
So to maintain the reference use this:(checkout inline comments.)
So now we have a reference of original collection view inside the loop. So now just lets complete the third task, i.e., rendering the whole collection list.
Here is console output:
A quick tip: Always return this from your render method to do chaining. For example person.render.el instead of running two commands person.render and then person.el.
So let’s use this tip finish up the lesson. So currently we have: (checkout inline comments.)
Let’s do certain things: (checkout inline comments.)
Remove initialize function from PersonView to use chaining and manually call render.
Returning this from PersonView render method
Returning this from CollectionView render
Adding the whole list on Dom for demo purpose.
So lets just run this code and see what we have:
Boom.. A complete list of the person displayed on the page. Pretty nice. ;) So now if you are the thing that so far so much code just to see a list. Hold on. This is how we got the whole structure of the application. Now to add Jquery events all we need to call functions and add some new minor features. Trust me once you start checking out jquery events. You will just fell in love with backbone.
Source code
If you are facing any issues. Check out 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.