Practice the Kernel.js to implement a small demo. Kernel.js Website : http://alanlindsay.me/kerneljs/ Demo: http://jsbin.com/sugoma/ Hackpad: https://hackpad.com/Kernel.js-Tips-0zTjJuntzbD

index.jade

doctype html
html
  head
    title
      | Kernel.js Demo
  body
    p
      | Number of Click these buttons: 
      span.counter 0
    
    p
      | Log Status:  
      span.status 
        | Waiting  
    button#start
      | Start Log
    button#stop
      | Stop Log
    script(src="http://alanlindsay.me/kernel.min.js")
    script(src="//code.jquery.com/jquery-1.11.1.min.js")

main.coffee

Kernel.hub.define 'main',
  updateStatus: (status) ->
    @broadcast 'status-update',
      date: Date()
      status: status
    @updateLog status
    return
  updateLog: (status) ->
    Kernel.stop 'module-log' if status is 'Stop' and Kernel.module.isStarted('module-log')
    Kernel.start 'module-log' if status is 'Start' and !Kernel.module.isStarted('module-log')
    return

Kernel.module.define 'Counter',
  _jqCounter: null
  _counter: 0
  init: ->
    module = this
    @_jqCounter = $('.counter')
    module.hub.listen 'status-update', (data) ->
      module._counter = module._counter + 1
      module.render()
      return
    return
  render: ->
    @_jqCounter.text(@_counter)
    return
    
Kernel.module.define 'Status', 
  _jqStatus: null,
  _status: null
  init: ->
    module = this
    @_jqStatus = $('.status')
    $('#start').on 'click', @_start
    $('#stop').on 'click', @_stop
    
    module.hub.listen 'status-update', (data) ->
      module.render(data)
      return
    return
  _setStatus: (status) ->
    @_status = status
    @hub.updateStatus status
    return
  _start: ->
    @_setStatus 'Start'
    return
  _stop: ->
    @_setStatus 'Stop'
    return
  render: (data) ->
    @_jqStatus.text data.status

Kernel.module.define 'Log',
  init: ->
    module = this
    module.hub.listen 'status-update', (data) ->
      module.log(data)
      return
    return
  log: (data)->
    console.log data.date
    return
    
Kernel.register 'module-status', 'Status'
Kernel.register 'module-counter', 'Counter'
Kernel.register 'module-log', 'Log'

Kernel.startAll()