Step 2: Build template for project-list, remove dummy list from home view template, create view for list items, add list to home view.

index.html

<!-- simplified item-home termplate -->
<script id="item-home" type="text/template">
  <!-- Example row of columns -->
  <div class="row-fluid">
    <div class="span4">
      <form id="selection" action="" method="post">
        <h2>List of Projects</h2>
        <ul id="p-list">
          <li>Loading projects...</li>
        </ul>
        <p><a class="btn btn-primary" href="order.html">Order selected projects &raquo;</a></p>
      </form>
    </div>
    <div class="span8">
      <h2>Project Details</h2>
        <p>
          Click on a project title at left to see details.
        </p>
    </div>

  </div>

  <hr>

  <footer>
    <p>&copy; Your Name (your student number) 2013</p>
  </footer>
</script>

<!-- Template for list (left-menu) -->
<script id="project-list" type="text/template">
  <li>
    <input type="checkbox" name="selected_projects" value="<%= id %>">
    <a class="project btn" href="#/projects/<%= id %>">
      <%= title %>
    </a>
  </li>
</script>

step2-main.js

var ListView = Backbone.View.extend({
  tagName: 'ul',
  id: 'p-list',

  initialize: function () {
    this.collection.bind('all', this.render, this);
    this.template = _.template($('#project-list').html());
  },

  render: function (eventName) {
    var template = this.template,
    el = this.$el,
    collection = this.collection;

    $("#p-list").empty();

    collection.each(function (project) {
      $("#p-list").append(template(project.toJSON()));
    });

    return this;
  }

});

// New render method in HomeView -- renders the list of projects
var HomeView = Backbone.View.extend({
  // ...
  render: function() {
    var el = this.$el
    el.empty();
    el.append(this.template());
    var availableProjectsListView = new ListView({collection: projectList});
    $("#p-list").append(availableProjectsListView.render().el);
    return this;
  }
});