pangratz prattles

GitHub Dashboard #10

Jul24th, 20126:46 pm

Goal of this iteration: Show events for repositories

In this iteration events for a repository are added. These events seem kind of useful to me since they allow to keep up to date what’s happening in the repositories. Which issues have been created and closed, how many pushs happened, what changed in the wiki, …

Because we are going to deal with events I added a Dashboard.Event model:

The controller which holds all events which shall be shown is a simple Ember.ArrayController, implemented similar to the available ones:

app/libc/controller.js

1

Dashboard.EventsController=Ember.ArrayController.extend();

Alright, everything is ready to implement the view for the events. The GitHub API returns events of different types, as stated in the documentation. Each event holds different information so it’s a good idea to implement a template for each type of event. Luckily, the API specifies the type of the event in the type property of the hash. This allows us to define a base view for all events, which then returns the name of the template which shall be used, based on the value of this very type property. So, let’s create a base view for an event:

Inside the DetailView is where the magic happens: the templateName is returned based on the value of the event.type property. So this will return events/WatchEvent-template for the WatchEvent. All templates for a specific type of event have the same structure. They look similar to this:

Since all events will look something like USERNAME started watching ABC or USERNAME created tag DEF, an ActorView is created, which renders this common stuff. The ActorView is declared in the DetailView:

And now there is basic support to render different events with handlebars. Luckily, I have already written most of the templates for another project, so this was basically just a good old copy and paste. The templates and views have been added in commit ab996d7.

The final part is now to connect everything together inside the root.user.repository route:

app/lib/router.js

12345678910111213141516171819

repository:Ember.Route.extend({route:'/:repository',connectOutlets:function(router,context){varusername=router.get('userController.username');varrepoName=context.repository;// fetch repo for current uservarrepo=router.get('store').find(Dashboard.Repository,'%@/%@'.fmt(username,repoName));router.set('repositoryController.content',repo);router.get('applicationController').connectOutlet('repository');// get all events for this repository, and connect to the events outletvarevents=router.get('store').findQuery(Dashboard.Event,{username:username,repository:repoName});router.get('repositoryController').connectOutlet('events','events',events);}}),

where the template for the repository has been adapted to include an outlet for the events:

Roundup

So, this has been a big change: show events for a repository. The hardest part was to copy the templates from the existing repository into this dashboard repository. Implementing the call to the GitHub API as well as connecting the view with the data has been easy as a breeze. Ember.js indeed is a very handsome framework.