Let's build our issues list. Each item in the list simply consists of an issue title, project name, a date, the issuer's username, and its status.

What follows is an HTML template ./templates/issues.hbs for a issues item:

<a class="pull-left" href="#">
  <img class="media-object" src="{{avatar_url}}"style="width:64px; height:64px">
</a>
<div class="media-body">
  <h4 class="media-heading">{{title}}</h4>
  <small>{{repository}}</small>
  <small>{{ago}}</small>
  <br/><small>{{login}},<b>{{state}}</b></small>
</div>

Let's implement our Issue model; we define a function Issue, which extends the Backbone Model type, and includes a hash of default values for the properties in our model.

Vision.Issue = Backbone.Model.extend({
  defaults: {
    title : '',
    state : '',
    date : '',
    ago: '',
    login : '',
    avatar_url : ''
  }
});

Let's implement a collection called IssueList for our Issue model. We define a function, IssueList, which extends the Backbone Collection type, and specifies the model type as Vision.Issue. We add a url method that uses the web API route /project/:id/issues to return a list of issues. The initialize method is called when the collection is instantiated; from here we assign the selected projectId. The parse method is called when a fetch is performed and will parse the response; here we assign our MongoDB _id to the response.id.

Vision.IssueList = Backbone.Collection.extend({
  projectId: '',
  model: Vision.Issue,

  url : function() {
    return '/project/' + this.projectId + '/issues';
  },

  initialize: function(items, item) {
    this.projectId = item.projectId;
  },

  parse: function( response ) {
    response.id = response._id;
    return response;
  }
});

Let's implement a view for our Issue collection. We define a function, IssueListView, which extends the Backbone View type, and add an Issues array for our issue list. The initialize method is called when the view is instantiated; from here we call create and instantiate a new IssueList, passing our Issues array. We then call refresh, which loops through the Issues collection, rendering the view with a call to render. The render method uses underscore to loop through the Issues collection called collection.models; and calls add(item)for each issue. The method add instantiates IssueView, passing to it an Issue model. We then append a rendered IssueView to our DOM element via $el and return the view.

Vision.IssueListView = Backbone.View.extend({
  Issues: [],

  initialize: function (args) {
    if (!args.projectId) return;
    this.Issues = args.issues || [];
    this.$el.html(''),
    this.create(args);
    this.refresh();
  },

  create: function(args) {
    this.collection = new Vision.IssueList(this.Issues, { projectId : args.projectId });
    this.render();
  },

  refresh: function(){
    var me = this;

    if (!this.Issues.length) {
      this.collection.fetch({ success: function(){
        me.render();
      }});
    }
  },

  render: function () {
    _.each(this.collection.models, function (item) {
      this.add(item);
    }, this);
  },

  add: function (item) {
    var issueView = new Vision.IssueView({ model: item });

    this.$el.append(issueView.render().el);
    return issueView;
  }
});

We continue by adding a view for a single issue. We define a function, IssueView, which extends the Backbone View type, and add a tagName and assign li to it; this tag will be wrapped around our IssueView function. Our DOM element is a ul tag. We include a viewTemplate and assign our precompiled handlebars template templates/issues.hbs to it. The render method renders the view; we pass the issue model to viewTemplate which is then added via $el to our DOM element and we return the view.

Vision.IssueView = Backbone.View.extend({
  tagName: 'li',
  className: 'media',
  viewTemplate: visiontemplates['templates/issues.hbs'],

  render: function () {
    this.$el.html(this.viewTemplate(this.model.toJSON()));
    return this;
  }
});

Let's complete the picture and change our router; we add a issueListView to the router and call issues inside the join method. The issues method instantiates IssueListView, passing projectId and a list of issues.

issueListView:'',

join : function(args){
    this.repository(args);
    this.issues(args);
    this.commits(args);
},

issues : function(args){
    this.issueListView = new Vision.IssueListView({ el: 'ul#issues-list', projectId: args.projectId, issues: args.issues});
},

Vision will now display a list of issues when selecting a project.