In place edit in Meteor using template instance and afterFlush

CoffeeScript

Template.imageDescription.onCreated ->
  template = this
  # template level instance
  template.editing = new ReactiveVar(false)
  template.saving = new ReactiveVar(false)

  # Automatically focus the input
  Tracker.autorun ->
    editing = template.editing.get()
    if editing
      Tracker.afterFlush ->
        template.$('input').select()

Template.imageDescription.helpers
  editing: ->
    return Template.instance().editing.get()

  saving: ->
    return Template.instance().saving.get()

Template.imageDescription.events
  'click .edit': (e, template)->
    e.preventDefault()
    template.editing.set true

  'click .cancel': (e, template)->
    e.preventDefault()
    template.editing.set false

  'click .save': (e, template)->
    e.preventDefault()

    description = template.$('input').val()
    $btn = $(e.currentTarget)
    $btn.button('loading')
    template.saving.set true
    Meteor.call 'updateImageDescription', this.image._id, description, (error, result)->
      if error?
        FlashMessages.sendError error
        template.saving.set false
        return
      $btn.button('reset')
      template.editing.set false
      template.saving.set false

jade

//- Usage: +imageDescription image=collectionObject description='this is the description'
template(name='imageDescription')
  if editing
    p.form-control-static
      form
        label.low-key Description
        .btn-group.btn-group-xs.pull-right(role="group")
          button.btn.btn-primary.save(type='submit' data-loading-text="Saving...") Save
          button.btn.btn-default.btn-xs.cancel(type='button') Cancel
        input.form-control(type="text" name='description' value='{{description}}' disabled=saving)
  else
    p.form-control-static
      label.low-key Description
      .btn-group.btn-group-xs.pull-right(role="group")
        button.btn.btn-default.btn-xs.edit(type='button') Edit
      p
        code.code-wrap {{description}}