Handling server-side round-trip acknowledgement with KnockOut.js

deferred_checkbox.coffee

@status_change_pending = ko.observable(false)

@paid = ko.computed({
  owner: @
  read: () =>
    @status() == 'paid'
  write: (value) =>
    oldVal = @status() # keep track to handle failure
    newVal = if value == true then 'paid' else 'to_be_paid'
    @status(newVal)
    @status_change_pending(true) # mark as disabled first
    $.ajax({
      type: 'PUT'
      url: "/entries/#{@id()}"
      dataType: 'json'
      data: { status: newVal }
      error: (response) =>
        @status(oldVal)
        alert("An error occurred!")
      complete: () =>
        @status_change_pending(false)
    })
})

view.html

<input type="checkbox" data-bind="checked: paid, disable: status_change_pending" />