This tutorial is an easy to follow example, how to use the library Backbone.js for creating dynamic views.
Backbone.js is a good tool to give a structure to JavaScript applications. The important classes are Views (that correspond to HTML elements), Collections (storage for the elements) and Models (the elements).
There are two other classes (Route and History), they are not covered by this tutorial. For single page applications, i. e. a JavaScript application running on a single HTML page, they help a lot to realize that.
Organization of this tutorial
The most instructions start at Events, create Models and put them into Collections. At the very end the View is build. This tutorial focuses more on an interactive approach, i. e. we use the browser console most of the time to directly run the instructions. Every instruction should immediately result in a reaction on the screen. This is the reason why we start with a View, that will be populated with elements.
Here we go: