How to use different templatesin the same page based on Status field

help
1

Hi There,
Im quite newbie in Meteor and trying to do a new application to make Timestamped Notes base on a live event, so the user can take notes and related with a time of the event. The ide could be like a Todo list with title and description with Added timestam and i would like to add a Form each time the user create a new note vene when he not type title or description in that precise time but he do later and submit each note as he wants.

I have all the notes created as embedded array in Events collection so i create the notes with a state like “status” =“inserted” or “status”=“created”.

I have the HTML of the templates in a notes.html templaye file and i use a form to submit in the case of the note is “inserted” and use standard html tags to show the note in case is “created”. I use conditional helpers to show one markup or another like this {{#if isInserted}}

{{#if isInserted}}
    <div class=" panel panel-default">
        <div class="panel-body add-annot8">
          <!--<div class="panel-heading">-->
            <form class="form-horizontal">
              <div class="form-group">
                <div class="input-group">
                  <input type="text" class="form-control" id="annot8Title" placeholder={{_ 'title_note'}}>
                  <div id='current-note' class="input-group-addon">19.00</div>
              </div>
                  <textarea class="form-control" id="annot8Desc" rows="5" placeholder={{_ 'describe_note'}}></textarea>
              </div>
              
              <button id="clear" class="btn btn-default" type="button" value="clear">{{_ 'clear_note'}}</button>
              <button type="submit" class="btn btn-primary pull-right">{{_ 'create_note'}}</button>
            </form>
          <!--</div>-->
        </div>
    </div>
  {{/if}}
  {{#if isCreated}}
    <div class="annot8Box panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{title}}</h3>
            <div class="annot8-tc">{{timeCode timeStart}}</div>
          </div>
          <div class="panel-body annot8-body">
            <p>{{desc}}</p>
          
            
            <div class="annot8-meta">
              <div class="author">
                <p class="response-author"><i class="fa fa-user" aria-hidden="true"></i>  {{userEmail}} on {{timeStamp createdAt}}</p>
              </div>
              <div class="btn-group" role="group" aria-label="...">
                <!--<button type="button" class="btn btn-default">Comments</button>-->
                <!--<button type="button" class="btn btn-default edit-annot8"><i class="fa fa-pencil" aria-hidden="true"></i></button>-->
                {{#if isAnnot8Owner}}<button type="button" class="btn btn-default remove-annot8"><i class="fa fa-trash-o" aria-hidden="true"></i></button>{{/if}}
              </div>
            </div>
          </div>
    </div>
  {{/if}}

And create helpes at the javascript template file like this

    isInserted: function(){
     if(this.status === 'inserted')
        return true;
    },
    isCreated: function(){
     if(this.status === 'created')
        return true;
    }

The idea behind that is the user can create as many notes as he want an fill the metadata of each note when he wants in his desired order and when is ready to submit any note, press OK button at the form and the template should change visualization for this note form the form to static data and show a “edit” button inc ase the user want to come back to the form to do some changes at the note.

I have the next code at the form submit event

'submit form': function(event, template){
        event.preventDefault();
        
        var videoId= Router.current().params._id;
        var annot8Id = this._id;

        // var id = this.id
        var annot8 = {
            title: template.find('#annot8Title').value,
            desc: template.find('#annot8Desc').value,
            status: 'created'
        }
        console.log( videoId, annot8Id, annot8);
        Meteor.call('annot8Update', videoId, annot8Id, annot8, function(error, result) {
            // display the error to the user and abort
            if (error)
                return console.log(error.reason);
        });

Everything works fine for the first note, i can work like as User and insert a Note, see the form and create a second Note and see a seoncd form, Submit the first form and HTML code under {{#if isCreated}} appears, but just for the fist note i subitted, when i type some title and description in a second note form and submit, the first Note change its data and the second not change it’s visualization and form keep in page. the rest of the Note forms give me a console error " Cannot read property ‘value’ of null"

I would thanks any advice about what im doing wrong , so im sure could be several things.

Thanks in advance

2

Finally i found my fatal error, im so new to javascript too and so new to mongodb too. i was using the follow update:

Notes.update({"annot8._id": annot8Id}, {$set:{"annot8.0.title": annot8.title ,"annot8.0.desc": annot8.desc,"annot8.0.lastModified": annot8.lastModified ,"annot8.0.status": annot8.status}});

so its allways updating the first element of the nested array in the collection.
change by:

Notes.update({"annot8._id": annot8Id}, {$set:{"annot8.$.title": annot8.title ,"annot8.$.desc": annot8.desc,"annot8.$.lastModified": annot8.lastModified ,"annot8.$.status": annot8.status}});

and works like a charm