This entry is part 7 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 in the previous lesson, we learned how to create templates. It good but it can be improved further using external templates. So in the lesson, we will learn how to develop templates in backbone js.
What we have till now
From the previous episode, we have this PersonView class
So now we will take the template HTML code out into an external file and then call it here in out template. So let’s use index.html file and define a template there. So just paste this code in your
We have defined this script as
Output on Chrome Console
Pretty nice right. Now lets what we have on chrome developer tools.
Similarly what we had in the previous lesson. Beautiful and cool. So this makes our life much easier to define the templates in an external file and then just call it when we need it. And we can structure out HTML code of the template pretty easily.
That’s all for this lesson. Now thing about one object. How about displaying multiple objects.
li tags. The good thing is backbone js has collection view for that. Let’s see that in next lesson.
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.