Some features implemented with and without reactive programming

post-notifications.coffee

Kefir.Observable.prototype.withIndex = (mapType, fn) ->
  index = 0
  this[mapType]((value) -> fn(value, index++))

ApiController = Ember.Controller.extend

  # With reactive programming
  # (also needs the function withIndex in the top of this file)

  postNotifications: (startCallback) ->
    Kefir.fromPromise(@store.find('notification')).flatMapConcat (notifications) =>
      notifications = notifications.filterBy('completed', true).toArray()
      total = notifications.length
      startCallback(total) if startCallback
      Kefir.sequentially(5, notifications).withIndex 'flatMapConcat', (notification, index) =>
        @postNotification(notification)
          .errorsToValues -> { success: false }
          .map (response) -> { total: total, index: index, notification: notification, success: response.success, response: response }

  # Without reactive programming

  postNotifications: (startCallback) ->
    deferred = $.Deferred()
    @store.find('notification').then (notifications) =>
      notifications = notifications.filterBy('completed', true)
      @serialize(notifications, deferred, startCallback)
    deferred.promise()

  serialize: (notifications, deferred, startCallback) ->
    deferred = $.Deferred() unless deferred
    total = notifications.get('length')
    results = Array(total)
    fn = (index) =>
      if index == total
        deferred.resolve(results)
        return
      notification = notifications.objectAt(index)
      @postNotification(notification)
        .then (response) ->
          results[index] = { success: response.success, notification: notification, response: response }
        .fail (p, x, error) ->
          results[index] = { success: false, notification: notification, response: { success: false, error: error } }
        .always ->
          deferred.notify(index, total, results[index])
          fn(index+1)
    startCallback(total) if startCallback
    fn(0)
    deferred.promise()

signature-input.coffee

SignatureInputComponent = Ember.Component.extend
  # extra code here...

  # With reactive programming
  initReactiveCanvas: (->
    canvas = @$('canvas')
    mouseDowns = Kefir.fromEvent(canvas, 'mousedown')
    mouseMoves = Kefir.fromEvent(canvas, 'mousemove')
    dragEnds   = Kefir.fromEvent(canvas, 'mouseup').merge(Kefir.fromEvent(canvas, 'mouseleave'))
    mouseDrags = mouseDowns.flatMap -> mouseMoves.takeUntilBy(dragEnds)
    mouseDowns.onValue (event) => @addPoint(event.pageX, event.pageY, false)
    mouseDrags.onValue (event) => @addPoint(event.pageX, event.pageY, true)
  ).on('didInsertElement')

  # Without reactive programming
  initRegularCanvas: (->
    isPainting = false
    canvas = @$('canvas')
    canvas.mousedown (event) =>
      isPainting = true
      @addPoint(event.pageX, event.pageY, false)
    canvas.mousemove (event) =>
      if isPainting
        @addPoint(event.pageX, event.pageY, true)
    canvas.mouseup    (event) => isPainting = false
    canvas.mouseleave (event) => isPainting = false
  ).on('didInsertElement')

  # extra code here...