[Backbone]8. Level 7: Router and history

1. Ceate a route Class

var AppRouter = Backbone.Router.extend({
    
});

2. Add a route name it "show", listene to 'appointments/:id'

var AppRouter = Backbone.Router.extend({
    routes: { "appointments/:id": 'show'},
    show: function(id){
        
    },
});

3. Start the backbone history, and put pushState to true:

Backbone.history.start({pushState: true});

4. New a Route instance, and use navigate function to 'appointments/1':

var router = new AppRouter();
router.navigate('appointments/1', {trigger: true});

5. In show function, we fetch the data where id = 1, new a view instance and replace the data on '#app':

var AppRouter = Backbone.Router.extend({
  routes: { "appointments/:id": "show" },
  show: function(id){
    var appointment = new Appointment({id: id});
    appointment.fetch();
    var appointmentView = new AppointmentView({model: appointment});
    $("#app").html(appointmentView.render().el);    
  }
});

6. First, add the root route and point it to the index action.

As you can see we are passing in a appointmentList list collection in the router's initialize function. Finish out the index action by replacing the content of #app with the appointmentsView. Make sure you fetch new data for the appointmentList from the server.

var AppRouter = Backbone.Router.extend({
  routes: { ""               : "index",
           "appointments/:id": "show" },

  initialize: function(options){
    this.appointmentList = options.appointmentList;
  },
  
  index: function(){
    var appointmentsView = new AppointmentListView({collection: this.appointmentList});
    appointmentsView.render();
    $("#app").append(appointmentsView.el);
    this.appointmentList.fetch();
  },

  show: function(id){
    var appointment = new Appointment({id: id});
    var appointmentView = new AppointmentView({model: appointment});
    appointmentView.render(); 
    $('#app').append(appointmentView.el);
    appointment.fetch();
  }
});

8. First, instead of assigning a Router class to AppRouter, just create the Router instance.

Next, instead of passing in the appointmentList collection in initialize, create an instance of AppointmentListand assign it to this.appointmentList.

Add a start function to the router to start our Backbone history with pushState on.

Finally, call the router's start function from inside a jQuery ready function to ensure we don't start updating the DOM before it's ready.

var AppRouter = new (Backbone.Router.extend({
  routes: { "appointments/:id": "show", "": "index" },

  initialize: function(){
    this.appointmentList = new AppointmentList();
  },
  start: function(){
    Backbone.history.start({pushState:true});
  },
  index: function(){
    var appointmentsView = new AppointmentListView({collection: this.appointmentList});
    appointmentsView.render();
    $('#app').html(appointmentsView.el);
    this.appointmentList.fetch();
  },

  show: function(id){
    var appointment = new Appointment({id: id});
    var appointmentView = new AppointmentView({model: appointment});
    appointmentView.render();
    $('#app').html(appointmentView.el);
    appointment.fetch();
  }
}));
$(window).ready(function(){
    AppRouter.start();
});

------------------------------Final Code--------------------------------

var AppRouter = new (Backbone.Router.extend({
  routes: { "appointments/:id": "show", "": "index" },

  initialize: function(){
    this.appointmentList = new AppointmentList();
  },
  start: function(){
    Backbone.history.start({pushState:true});
  },
  index: function(){
    var appointmentsView = new AppointmentListView({collection: this.appointmentList});
    appointmentsView.render();
    $('#app').html(appointmentsView.el);
    this.appointmentList.fetch();
  },

  show: function(id){
    var appointment = new Appointment({id: id});
    var appointmentView = new AppointmentView({model: appointment});
    appointmentView.render();
    $('#app').html(appointmentView.el);
    appointment.fetch();
  }
}));
$(window).ready(function(){
    AppRouter.start();
});
AppRouter.navigate('appointments/1', {trigger: true});

var AppointmentView = Backbone.View.extend({
  template: _.template('<span class="<% if(cancelled) print("cancelled") %>"><%= title %></span><a href="#">x</a>'),
 
  initialize: function(){
    this.model.on('change', this.render, this);
  },
    
  render: function(){
    this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
});
 
var AppointmentListView = Backbone.View.extend({
  initialize: function(){
    this.collection.on('add', this.addOne, this);
    this.collection.on('reset', this.render, this);
  },
  render: function(){
    this.collection.forEach(this.addOne, this);
  },
  addOne: function(model){
    var appointmentView = new AppointmentView({model: model});
    appointmentView.render();
    this.$el.append(appointmentView.el);
  }
});


var Appointment = Backbone.Model.extend({
  defaults: function() { 
    return {
      'date': new Date(), 
      'cancelled': false, 
      'title': 'Checkup'
    }
  }
});
 
var AppointmentList = Backbone.Collection.extend({
  model: Appointment
});