Batman.js is no longer in production at Shopify and is not actively maintained.

This website is left for reference (and for old times' sake).


When Batman.View is rendered, it goes through many steps. Lifecycle callbacks allow you to hook into those steps and control or respond to the rendering process.

Listening for Lifecycle Events

To set up handlers for a View's lifecycle, You can either call on on the View's prototype:

class MyApp.FadingView extends Batman.View
  @::on 'viewWillAppear', -> $(@get('node')).hide()

  @::on 'viewDidAppear', -> $(@get('node')).fadeIn('fast')

  @::on 'viewWillDisappear', -> $(@get('node')).fadeOut('fast')

or define functions with the same name as the events:

class MyApp.FadingView extends Batman.View
  viewWillAppear: -> $(@get('node')).hide()

  viewDidAppear: -> $(@get('node')).fadeIn('fast')

  viewWillDisappear: -> $(@get('node')).fadeOut('fast')

Lifecycle Events and Subviews

A View propagates its lifecycle events to its subviews, so it's likely that a lifecycle event will be called more than once. ready is an exception -- it's a one-shot event.

Help us improve our documentation!

Contributions to this page are welcome on Github. If you find a problem but you cannot fix it, please open an issue.

Discussion regarding batman.js documentation is also welcome on our mailing list.