Back and forth between INPUT and non INPUT DOM elements

help
1

Hi,

Beside packages (but package suggestions welcome!),
What would be the most natural least verbose way to switch a DOM item to/from an input version to/from a non input version?

I would like to avoid repeating fields twice in a {{IF}} ELSE block. (it could be per element balsys but I can live with the whole form switching to Input or to non input.

Thanks,
Marc

2

This is the way that I use. If you prefer an out of the box solution, check out the packages for x-editable, there are a few.

  1. Reactive variable or helper returns true for input, false for div
  2. Template calls subtemplate with argument from 1
  3. Subtemplate returns input if true, div if false

This way you don’t have to add if-else for each input in each form, you simply call subtemplate with arguments.

You can enhance this by using dynamic subtemplates, thanks to them you could easily get a nice animation for the input / div change if you want to switch between them f.e. on doubleclick.

Third alternative is to go with contenteditable div, where you simply add the contenteditable argument and optionally styling class for your div, that makes it look like input.

I find Blaze Components being of a great help to achieve that, but you can do it in pure Blaze as well.

3

Check out https://atmospherejs.com/babrahams for a list of editable packages.

4

Thanks.

An example would be appreciated.
I suppose one can define which widget to select by calling dynamic templates.

Your post lead me to https://www.youtube.com/watch?v=pGQ-ax5cFnk
about UI.Components. Anybody knows if it is implemented now? This video is more than 2 years old now.
(I mean, I did not find it in Meteor,s doc.)