     'click #mark-all-read': 'read'
 
   initialize: ->
-    @listenTo @collection, 'add', @add
+    @listenTo @collection, 'add change', @add
     @listenTo @collection, 'reset', @addAll
 
     @listenToOnce @collection, 'sync', =>

    @$list = @$('.notification-list')
    @

  add: (notification) ->
    view = new App.Views.Notification(model: notification).render()

    # Maintain view order by inserting it the new element before the element
    # that is currently in its place.
    sibling = @$list.children().eq(@collection.indexOf(notification))
    if sibling.length
      sibling.before(view.el)
    else


    @listenTo @collection, 'request', @startPaginating
    @listenTo @collection, 'sync', @donePaginating

    @views = {}

  render: ->
    @$el.html @template()
