initialize.coffee

routes = require './routes'

# Execute handler on document ready event.
jQuery ->
  # Initialise new Chaplin application.
  # Specify controller suffix for clarity.
  new Chaplin.Application
    controllerSuffix: '-controller', pushState: false, routes: routes

random-users-view.coffee

View = require 'views/base-view'

module.exports = class RandomUsersView extends View
  className: 'random-users cell'
  template: require './templates/random-users'

random-users.hbs

<ul>
  {{#each items}}
    <li><a href="{{url "users#show" this.login}}">@{{this.login}}</a></li>
  {{/each}}
</ul>

routes.coffee

# All application routes that will be matched against URLs.
module.exports = (match) ->
  match '@:login', 'users#show'
  match '', 'users#index'

site-view.coffee

View = require 'views/base-view'

# Site view is a top-level view which is bound to body.
module.exports = class SiteView extends View
  container: 'body'
  id: 'site-container'
  regions:
    url: '#page-url'
    main: '#main-container'
    navigation: '#nav-container'
  template: require './templates/site'

site.hbs

<h2><a href="{{url "users#index"}}">GitHub viewer</a></h2>
<div class="cell" id="main-container"></div>

user-view.coffee

View = require 'views/base-view'

module.exports = class UserView extends View
  className: 'user'
  template: require './templates/user'

user.coffee

# User model. Main application model. Stores user data.
# Inherits from Chaplin model which inherits from Backbone model.
module.exports = class User extends Chaplin.Model
  # Corresponds to stuff like https://api.github.com/users/paulmillr.
  # Used when model fetch and save are done.
  url: ->
    "https://api.github.com/users/#{@get 'login'}"

user.hbs

<img class="user-avatar" src="{{avatar_url}}" width="100" height="100" alt="">
<h3>{{name}}</h3>
<p><a href="https://github.com/{{login}}">github.com/{{login}}</a></p>
<strong>Followers:</strong> <span class="followers-count">{{followers}}</span>

users-controller.coffee

User = require 'models/user'
RandomUsersView = require 'views/random-users-view'
UserView = require 'views/user-view'
SiteView = require 'views/site-view'

fixture = [
  {login: 'paulmillr'},
  {login: 'molily'},
  {login: 'paulirish'},
  {login: 'addyosmani'},
  {login: 'sindresorhus'},
  {login: 'dhh'},
  {login: 'mehcode'}
]

# Main application controller.
# Controllers manage memory and initialize models with views,
# storing them on current controller instance.
# When URL is changed, controller disposes itself and all
# instance properties (models, views etc).
module.exports = class UsersController extends Chaplin.Controller
  # Would be executed before each action.
  # We do `composing` for views and things that should persist
  # within many controllers — all non-composed views are deleted.
  beforeAction: ->
    # Site view declares “main” region.
    @compose 'site', SiteView

  # Index action. Will just display a list of users.
  index: (params) ->
    # Create simple collection with random GitHub users.
    @collection = new Chaplin.Collection fixture
    # Render the collection to view.
    @view = new RandomUsersView {
      autoRender: true,
      @collection, region: 'main'
    }

  show: (params) ->
    # Initialize new User with login from URL params.
    @model = new User login: params.login
    @view = new UserView {@model, region: 'main'}
    @model.fetch().then @view.render

view.coffee

# Helper for Handlebars templates.
# http://handlebarsjs.com/#helpers
# Get Chaplin-declared named routes. {{url "likes#show" "105"}}
Handlebars.registerHelper 'url', (routeName, params..., options) ->
  Chaplin.helpers.reverse routeName, params

# Base view.
module.exports = class View extends Chaplin.View
  # Precompiled templates function initializer.
  getTemplateFunction: ->
    @template