Goal of this iteration: Implement list of showing watched repositories for a defined username.
The goal of this iteration is to implement the feature of showing the watched repositories for a given username. Before I started I removed some leftovers from
ember-skeleton template; namely the store, state manager and states as well as the unused
main_page template. Now all unused files are removed and the project layout is finally ready.
First of all I renamed the namespace from
Dashboard and updated the corresponding test in
Now it’s time to start to implement first feature: show watched repositories for a given username. To communicate with the GitHub API I implemented
watchedRepositories method takes an
target object and the name of the
callback method which shall be invoked with the data gathered from the API. The ajax call has the
dataType jsonp so the response includes the result of the API call as well as the HTTP header information. See documentation at developer.github.com. Inside
_updateLimits the rate limiting information is stored on the data source itself, so we can track when we run out of allowed requests for the API. A note about invoking the
callback: only the relevant
data property of the JSONP response object is passed (line 19). The complete
Dashboard.GitHubDataSource is implemented as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
Now that there is a data source for querying the API, I created a controller
Dashboard.RepositoriesController which holds all repositories which shall be shown in the view. It has a method
loadWatchedRepositories which asks the data source to load the watched repositories for the specific username and then adds them via the
addObjects methods to the
content property of the array. The base class
Ember.ArrayController allows to sort the content by specific property names on the items. The repositories shall be sorted by
full_name, which is the username and the name of the repository joined by a
/. This property needs to be defined in the
1 2 3 4 5 6 7 8 9
Next step is to create a basic template for the repositories: Just iterate over the controller of the template’s view and show each full name of the repository, add a link to the repository and show the description.
1 2 3 4 5 6 7 8
The final step is to assemble everything together. That’s what the
app/main.js is for. First a
GitHubDataSource and a
RepositoriesController is instantiated. The data source is set on the controller. Afterwards the method
loadWatchedRepositories is invoked to load all watched repositories. Finally, an
Ember.View with the
repositories template is created, the controller is set and the view is added to the document via
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
In this iteration I’ve created a data source which communicates with the GitHub API and passes fetched results to a callback. The callback is in this case a controller which holds all repositories, which shall be shown. A template iterates over the controller’s items (repositories) and shows some basic information. The result of the changes in this post are available at tag v0.0.3 ((changes)).
Currently only the first 30 watched repositories are fetched from the API. Pagination as described here will be the topic of an upcoming iteration. Also, it’s time to implement a Router which will coordinate the creation of views and controllers.