Joosy / Blog / Elements, Events and Filters

Events (complex).coffee

# layouts/application.js.coffee
class @ApplicationLayout extends Joosy.Layout
  @view 'application'

  elements:
    'navigationBar': '.navbar'
    'clocks':        '.navbar .pull-right a'

  events:
    'mouseenter $navigationBar': 'showClocks'
    'mouseleave $navigationBar': 'hideClocks'

  showClocks: -> @clocks.show()
  hideClocks: -> @clocks.hide()

Events.coffee

# layouts/application.js.coffee
class @ApplicationLayout extends Joosy.Layout
  @view 'application'

  elements:
    'navigationBar': '.navbar'
    'clocks':        '.navbar .pull-right a'

  events:
    'mouseenter $navigationBar': -> @clocks.show()
    'mouseleave $navigationBar': -> @clocks.hide()

Filters.coffee

@afterLoad ->
  updateClocks = => 
    @clocks.html new Date().format('{dd} {Mon} {yyyy}, {hh}:{mm}:{ss}')

  updateClocks()
  @setInterval 1000, updateClocks

Flow control.coffee

@beforeLoad ->
  @navigate('/') && return false unless window.currentUser
  true

Mock layout.haml

.navbar.navbar-fixed-top
  .navbar-inner
    .container
      %ul.nav.pull-right
        %li
          %a
            24 May 2012, 19:24:00
      %a.brand{:href => '#!/'}
        Joosy Blog
      %ul.nav
        %li.divider-vertical
        %li
          %a{:href => '#!/posts/new'} Write something

.container{:id => @yield()}

Sorry, the indentation disappeared in the coffeescript code above.