     activeClasses: 'ui-state-active'
 
   initialize: ->
-    router = UIRouterMarionette.getInstance()
-    @deregister = router.transitionService.onSuccess {}, => console.warn("state changed!!!")
+    @router = UIRouterMarionette.getInstance()
+    @deregister = @router.transitionService.onSuccess {}, (transition) => @onStateChange()
 
   onRender: ->
-    @deregister()
-    router = UIRouterMarionette.getInstance()
-    @ui.active.each (i, el) ->
-      $el = $(el)
-      state = $el.attr('ui-sref-active')
+    @onStateChange()
 
   onStateChange: ->
-
+    @ui.active.each (i, el) =>
+      $el = $(el)
+      params = $el.attr('ui-sparams')
+      if params
+        params = JSON.parse(params)
+      compareState = $el.attr('ui-sref-active') || $el.attr('ui-sref') # fall back to the state in ui-sref if the ui-sref-active attribute is present but empty
+      classFn = if @router.stateService.includes(compareState, params) then 'addClass' else 'removeClass'
+      $el[classFn](@options.activeClasses)
 
   onBeforeDestroy: ->
     @deregister()

      e.attr('href', url)


exports.UISrefActive = class UISrefActive extends Mn.Behavior
  ui:
    active: '[ui-sref-active]'

{ UIRouterMarionette } = require('../index')


# A helper behavior for linking to states with or without state parameters.
# Element attributes:
#   ui-sref="app.state.substate"
#   ui-sparams='{"client_id": 5}' - optional if state doesn't need params or
#                                   you're linking to a sibling/child state
#                                   with the same parameters.
#                                   The value should be HTML-encoded JSON.
#                                   A template helper method is helpful here.
# Behavior options: none
#
exports.UISref = class UISref extends Mn.Behavior
  ui:
    sref: '[ui-sref]'
