How to implement editable text in Meteor and DRY? -

i have come methodology making editable text in meteor app. however, not follow dry paradigm , i'd change not javascript yet...

suppose have table cell text , i'd double click edit it. created template variable handle this:

<td class="itemname">     {{#unless edititemname}}         {{name}}      {{else}}         <input class="edititemname" type="text" value="{{name}}" style="width:100px;">     {{/unless}} </td> 

i create event execute transition on double-click:

template.inventoryitemdetail.events = {  'dblclick td.itemname': function (evt) {   session.set("edititemname",true); }, 'blur input.edititemname': function () {   session.set("edititemname",null); },}; 

i reused ok_cancel code todo's example app (but that's sort of irrelevant):

  // returns event_map key attaching "ok/cancel" events   // text input (given selector)   var okcancel_events = function (selector) {     return 'keyup '+selector+', keydown '+selector+', focusout '+selector;   };    // creates event handler interpreting "escape", "return", , "blur"   // on text field , calling "ok" or "cancel" callbacks.   var make_okcancel_handler = function (options) {     var ok = options.ok || function () {};     var cancel = options.cancel || function () {};      return function (evt) {       if (evt.type === "keydown" && evt.which === 27) {         // escape = cancel         cancel.call(this, evt);         evt.currenttarget.blur();         } else if (evt.type === "keyup" && evt.which === 13) {         // blur/return/enter = ok/submit if non-empty         var value = string(evt.target.value || "");         if (value) {           ok.call(this, value, evt);           evt.currenttarget.blur();         }         else {           cancel.call(this, evt);           evt.currenttarget.blur();         }       }     };   };  template.inventoryitemdetail.events[ okcancel_events('input.edititemname') ] = make_okcancel_handler({ ok: function (value) {   items.update(this._id, {$set: {name: value}}); } }); 

finally, have tie session variable template variable:

template.inventoryitemdetail.edititemname = function () {   return session.get("edititemname"); }; 

so right now, have repeated of again , again each editable text field , works, seems terribly programming practice. have found various editable text utilities on github don't entirely understand them , none of them meteor!

i'd expand knowledge of meteor , javascript creating tool allows me have editable text without repeating myself ridiculous amount each editable text field.

thanks,

chet

https://github.com/nate-strauser/meteor-x-editable-bootstrap package.

http://vitalets.github.io/x-editable/docs.html docs.

i implemented in project , won't ever go contenteditable.