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()}

@afterLoad does not works for those who copy'n'paste it :)

It is better to add two spaces before each line:

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

    updateClocks()
    @setInterval 1000, updateClocks

There is a problem with @beforeload, here is mylayouts/application.js.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'

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

updateClocks()
@setInterval 1000, updateClocks

@beforeload ->
@Navigate('/') && return false unless window.currentUser

true

Here is my browser contents:

ExecJS::RuntimeError in Blog#index

Showing /home/kenb/development/joosy-blog/app/views/layouts/blog.html.erb where line #8 raised:

SyntaxError: cannot use a pure statement in an expression.
(in /home/kenb/development/joosy-blog/app/assets/javascripts/blog/layouts/application.js.coffee)
Extracted source (around line #8):

5:
6: <script type="text/javascript">
7: window.joosy = {
8: libraries: <%= extract_sources_and_sizes_from_include_tag('blog') %>,
9: environment: '<%= Rails.env.to_s %>'
10: };
11: </script>
Rails.root: /home/kenb/development/joosy-blog

Application Trace | Framework Trace | Full Trace
app/views/layouts/blog.html.erb:8:in _app_views_layouts_blog_html_erb___1034374548_74862460' app/controllers/blog_controller.rb:5:inindex'
Request

Parameters:

None
Show session dump

Show env dump

Response

Headers:

None

I can make things work by commenting out the @beforeload function. Please explain what is happening.

Sorry, the indentation disappeared in the coffeescript code above.