Let's start with the Event model class, which will go in the models.js file of the public folder. Separating our code into multiple files is a good first step for organization, but we can go one step further. Previously, each of our classes has been referenced by its own global variable. You probably know that this isn't a really wise technique. If we're using other libraries, frameworks, or plugins, we don't want two components to use the same variable name and mess up the works. In this application, we're going to put all our classes safely inside a single global object. So, we start the models.js file with the following code:
window.App = window.App || {};
App.Models = {};The first line may seem a bit tricky; why not just use var App = {};? Well, the technique I've used here allows us to not worry about the order our files are loaded in the browser. This line first checks to see whether window.App exists. If it does, it assigns it to itself (basically...