Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
In place edit in Meteor using template instance and afterFlush
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
//- 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}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment