Step 3: Add template for showing project details, add view for rendering view of project, add projectView to HomeView when routed to a particular project, add route to projects/:id to router. Add function to toggle styles when routing to a new project.

index.html

<script id="project-show" type="text/template">
  <h2><%= title %></h2>
  <p><strong>For discipline</strong>: <%= discipline %></p>
  <%= description %>
  <p>
    <strong>Supervisor</strong>: 
    <%= supervisor.name %> 
    (<%= supervisor.email %>),<br>
    <%= supervisor.centre.name %> 
    ( <%= supervisor.centre.code %> ).
  </p>
</script>

step3-main.js

 var ProjectView = Backbone.View.extend({

    className: "span8",
    tagName: "div",

  initialize: function () {
    this.template = _.template($('#project-show').html());
    this.model = this.options.model;
    this.render();
  },

  render: function () {
    $('.span8').remove();
    $(this.el).html(this.template(this.model.toJSON()));
    console.log(this.el);
    $('.row-fluid').append(this.el);
    return this;
  },

});

// ...

AppRouter = Backbone.Router.extend({

  routes: {
    "": "home",
    "projects/:id" : "show"
  },

  home: function () {
    console.log('home');
    new HomeView();
  },

  show: function(id) {
    console.log("show " + id);
    this.toggleStyles(id);
    project = projectList.get(id);
    new ProjectView({model: project});
  },

  toggleStyles: function(id) {
    $(".project.btn.btn-info").removeClass("btn-info");
    $('a[href$="' + id + '"]').addClass("btn-info");
  }
});