Andrew Kim bio photo

Andrew Kim

A Full Stack Web Developer

Twitter Facebook Github Stackoverflow

In class @GA_DC, we just “learned” backbone. Although the teachers did an amazing job, it’s just really hard to learn your very first JS framework. In addition to that, because of time constraints we were only able to have about an hour of instructional time on Object Oriented JS prior to the introduction of backbone. So my natural inclination will be to try and learn it better by writing this post. I wanted to go a different direction but my buddy from class convinced me to use the title above. Thanks @CityLims for the title buddy.

In this post, we’re going to be making a one page app. We’re going to call it Reminders, but lets be honest, its a todo App. This post will require knowledge of JS, jQuery, DOM elements and HTML. I’ll be using Backbone’s MV*(Presenter) for basic create and delete functionality for reminders in our reminders app. Also, there will be lots of code, and the comments throughout will probably explain more than the blurbs in between code. Alrighty, so lets get to it.

Lets make a new directory where we want to work from and make some directories and files were going to need, in the terminal:

$ mkdir reminder
$ cd reminder
$ mkdir js/models
$ mkdir js/collections
$ mkdir js/views
$ mkdir js/routers
$ touch ./index.html
$ touch js/models/reminder.js
$ touch js/collections/reminders.js
$ touch js/views/reminder_view.js
$ touch js/views/reminders_view.js
$ touch js/routes/reminder_router.js

Now we’re going to create our skeleton, add our dependencies, and some basic HTML elements, in our index.html:

<!DOCTYPE html>
    <h1> Reminders </h1>

    <!-- where the reminders will live -->
    <div class='reminder_container'>

    <!-- the form for reminders -->
      <div class='reminder_form'>
          <label>New Reminder</Label>
          <input class ='reminderBody' type='text'>
          <input class ='new_reminder' type='submit'>

    <!-- Jquery cdn, underscore/backbone dependency -->
    <script type='text/javascript' src=''></script>

    <!-- underscore cdn, backbone dependency -->
    <script type='text/javascript' src=''></script>

    <!-- Backbone cdn -->
    <script type='text/javascript' src=''></script>

    <!-- loading the rest of our script files, order is important! -->
    <script src='js/app.js'></script>
    <script src='js/models/reminder.js'></script>
    <script src='js/collections/reminders.js'></script>
    <script src='js/views/reminder_view.js'></script>
    <script src='js/views/reminders_view.js'></script>
    <script src='js/routers/reminder_router.js'></script>

Let’s first fill our js/app.js so we can establish a name space and instantiate our Router which we will define later. In js/app.js:

// Right here, we're going to name space all of our models,
// collections, Views and Routers in an App object so we don't
// pollute the global namespace
App = {
  Models: {},
  Collections: {},
  Views: {},
  Routers: {}

// We don't want to instantiate our Router until all the other
// files have loaded.
  App.Routers.main = new App.Routers.Main();

Great, lets knock out a couple easy ones and make our Backbone model and collection. In js/models/reminder.js:

// This is our Reminder Object with a default for the reminderBody attribute
App.Models.Reminder = Backbone.Model.extend({
  defaults: {
    reminderBody: ''

In js/collections/reminders.js:

// This is our Reminders Collection Object that will contain instances
// of our Reminder Model Object
App.Collections.Reminders = Backbone.Collection.extend({
  model: App.Models.Reminder

Next we will be creating the constructor function for our Backbone Router. Where we initialize our collection and collection view(also list view).

Note, this programs functionality will be limited; however, should you want people to bookmark your site in different states, a lot of that code would go here. In the future, I may write another post that focuses more on routers and their uses. It is much more robust than the marginal utility that is seen in this program where it’s just used to instantiate our Backbone objects.

In js/routers/reminder_router.js:

// This is our applications main and only router.
App.Routers.Main = Backbone.Router.extend({

  // here's where you can route to specific urls, we won't be going
  // over that in this post
  routes: {

  // Upon initialize we'll instantiate our reminders Collection and
  // Collection View
  initialize: function(){
    App.Collections.reminders = new App.Collections.Reminders();

    App.Views.reminderListView = new App.Views.RemindersView({ collection: App.Collections.reminders})

    // Add Some dummy content so the page loads with some stuff.
    App.Collections.reminders.add({reminderBody: "pick up groceries"})
    App.Collections.reminders.add({reminderBody: "learn backbone"})
    App.Collections.reminders.add({reminderBody: "be happy"})

Next we will be working on the views. We will have the constructor functions for the Item View(the view for each individual reminder) and the List View(the view for the collection of reminders, which is comprised of Item Views)

The next two js files is where everything is happening and probably the most important of all the others.

In js/views/reminder_view.js:

// This is the constructor function for our Backbone Item View for
// our reminder objects
App.Views.ReminderView = Backbone.View.extend({

  // gives this $el a class name of reminder
  className: 'reminder',

  // add listener for clicking on span with class delete and executing callback onDelete
    'click span.delete': 'onDelete'

  // when new Item view is instantiated calls the render function on it
  initialize: function(){

  // creates the reminder with a delete span
  render: function(){
    this.$el.html('<p>'+ this.model.attributes.reminderBody + '</p><span class="delete">Delete</span>')

  // deletes the view and model
  onDelete: function(){

In js/views/reminders_view.js:

// This is the constructor function for our Backbone list view
App.Views.RemindersView = Backbone.View.extend({

  // declare the domain of the view, in this case div with class
  // reminder_container
  el: ".reminder_container",

  // click event when new reminder is submitted to run the callback,
  // newReminder
  events: {
    'click input.new_reminder': 'newReminder'

  // when a new list view is created adds a listener to when the Collection
  // adds another model also calls addAll function on itself
  initialize: function(){
    this.listenTo(this.collection, 'add', this.addOne)

  // creates a new Item View for reminder objects
  addOne: function(reminder){
    var newReminderView = new App.Views.ReminderView({ model: reminder});

  // loops through collection and calls addOne on each
  addAll: function(){

  // gets data from form
  getFormData: function(){
    return { reminderBody: this.$(".reminderBody").val() }

  // adds a new reminder object to reminders collection
  newReminder: function(e){
    var data = this.getFormData();

Success! We now have a functional app that can post reminders and delete them as we complete them. If you’ve been following along you should see something like this in your browser:

Toy around with it, create and delete some reminders. I encourage you to dive into the JS and play around with it, maybe add some more attributes add some filtering or editing capabilities. Backbone documentation can be found here Thanks for reading!