Read/Edit mode in form by double click on element in article


I’m working on arabic-russian dictionary, and using Blaze (honestly I avoid React because I like using bootstrap in ordinary way with pure html, may be I’m wrong).

In each word article there are too many fields, like word-forms, translations, examples, example’s translation etc. I want to open micro edit forms for all item of the particular data.

{note, word} 
        {example, translation} 

That’s how looks word-article:

Screenshot from 2017-10-06 19-10-22

For each data item there is hidden inputs, for change them. Micro edit forms are pairs of input in most of cases. Or one input for translation. I want to hide displayed data by dblclick on it, and open micro-form for change it. But I can’t understand clearly how it realize without make code unreadable and ugly.

That is how looks pair display/edit for word item:

<div class="wordDisplay display">
    <div id="article.{{../_id}}.words.{{@index}}.note" class="note">{{note}}</div>
    <div id="article.{{../_id}}.words.{{@index}}.word" class="word -arabic-text-big">{{word}}</div>

<div class="wordEdit editField" id="article.{{../_id}}.words.{{@index}}">
    <input type="text" placeholder="примечание" value="{{note}}" name="article.{{../_id}}.words.{{@index}}.note" class="form-control note">
    <input type="text" placeholder="слово" value="{{word}}" name="article.{{../_id}}.words.{{@index}}.word" class="form-control word -arabic-text-big">

That is how I handle changing:{ 
    'change input'(event){
        let doc = eventToDoc(,'articles.update', doc)

Changing works fine. Now question is, how to realize Open/Hide functionality…
I have one idea to make helpers with to long id’s of elements. But then code will be so ugly…
Please, share your ideas.


I have found an answer. I just created 3 additional helpers, where I calculate wordId, translationId etc, and use them in instead of “article.{{…/_id}}.words.{{@index}}” in template.
There are helpers:

        const instance = Template.instance()
        return id == instance.editModeFor.get()
        let newWords =, index) => {
            return {note: elem.note, word: elem.word, wordId: `article.${this._id}.words.${index}`}
        return newWords
        let newTranslations =, index) => {
            return {
                    translation: elem.translation, 
                    translationId: `article.${this._id}.translations.${index}.translation`, 
                    examples:, index2)=>{
                        return {
                                example: elem2.example,
                                translation: elem2.translation,
                                exampleId: `article.${this._id}.translations.${index}.examples.${index2}`
        return newTranslations

And there is template:

{{#unless isEditModeForId wordId}}
    <div class="wordDisplay display">
        <div id="{{wordId}}.note" class="note">{{note}}</div>
        <div id="{{wordId}}.word" class="word -arabic-text-big">{{word}}</div>
{{#if isEditModeForId wordId}}
    <div class="wordEdit editField" id="{{wordId}}">
        <input type="text" placeholder="примечание" value="{{note}}" name="{{wordId}}.note" class="form-control note">
        <input type="text" placeholder="слово" value="{{word}}" name="{{wordId}}.word" class="form-control word -arabic-text-big">


Just a heads up – you can also use else in your templates:

{{#if isEditModeForId wordId}}
 <!-- your wordEdit code -->
  <!-- your wordDisplay code -->