Double click to edit element in Meteor app
I think this can help you.
Lets create this helper.
Template.example.helpers({ 'editValue' : function(){ return Session.get("TargetValue" + this._id); }})
And this 2 events.
Template.example.events({ 'dbclick #spanIdOnDom' : function(e,t){ return Session.set("TargetValue" + t.data._id,true)//hide the span and we set the input }, 'click #buttonToSaveNewValue': function(e, t) { //here you can take the emailId and the name based on this._id like this Collection.find({_id:this._id}).fetch(); and do the updates you want to do var newValueFromInput = document.getElementById('newValueFromInput').value; var idCurrentDocument = this._id; var Bebida = Collection.findOne(t.data._id); Collection.update({_id: idCurrentDocument}, {$set:{fieldToUpdate: newValueFromInput}}); return Session.set("TargetValue" + t.data._id,false); //we hide the input and we put the span again } })
HTML
<template name="example"> {{#each collectionFind}} {{#if editValue}} <input type="text" id="newValueFromInput" value="{{currentValue}} " /> <button class="btn btn-sm btn-primary" id="buttonToSaveNewValue" type="submit">Save new Value</button> {{else}} <td> <p> <span class="content col-md-10" id="spanIdOnDom" ><h4>Descripcion Bebida:</h4><br>{{currentValue}} </span> </p> </td> {{/if}} {{/each}} </template>
Of course you need to set your Allow/deny
Permission and publish/subscribe
methods to make it work more efficient.
How it works?
in resume you have an <span>
tag with the current value, when you dobleClick
on the <span>
tag , we set the Session to true, the <span>
tag go away and a new <input>
appears with a new button then we take the value from the <input>
and she update ($set)
into the collection, and its done.
NOTE: this is a mini-repo from Simple Crud app in Meteor from Raj Anand, but the code on the blogs is on coffee and i don't use coffee Script.