Table row disappears when the edit button is clicked

问题

When I click the edit button, the whole row disappears, as if it was deleted, and does not go into the editMode of the template. The row comes back if you refresh the page. I have tried commenting out code to find an issue there, but that comes back clean. I have referenced other code that does work in editMode, and there is no difference. And I have tried googling. How can I change/add to the code to get it to engage editMode?

Created using Meteor platform. html:

<template name="SingleContact">
  {{#if editMode}}
    <form class="editForm">
      <td class="input-field">
        <input id="full_name" name="full_name" value="{{fullname}}" type="text" class="validate" />
      </td>
      <td class="input-field">
        <input id="email" name="email" value="{{email}}" type="email" class="validate" />
      </td>
      <td class="input-field">
        <input id="phone" name="phone" value="{{phone}}" type="tel" class="validate" />
      </td>
      <td class="input-field">
        <input id="phone2" name="phone2" value="{{phone2}}" type="tel" class="validate" />
      </td>
      {{#if customerIsEnterprise}}
        <td>
          <p>
            {{#if clientContact}}
            <input type="checkbox" id="primaryContact" name="primaryContact" checked="checked" />
            {{else}}
            <input type="checkbox" id="primaryContact" name="primaryContact" />
            {{/if}}
            <label for="primaryContact">Primary Contact?</label>
          </p>
        </td>
      {{/if}}
      <td><button type="submit" class="submit waves-effect waves-light btn">Save<i class="material-icons right">done</i></button></td>
      <td><a class="edit waves-effect waves-light btn red" href="#">Cancel<i class="material-icons right">delete</i></a></td>
    </form>
  {{else}}
    <tr>
      <td>{{fullname}}</td>
      <td>{{email}}</td>
      <td>{{phone}}</td>
      <td>{{phone2}}</td>
      {{#if customerIsEnterprise}}
      <td>
        {{#if clientContact}}
          Yes
        {{else}}
          No
        {{/if}}
      </td>
      {{/if}}
      <td class="button-cell"><a class="edit waves-effect waves-light btn" href="#">Edit<i class="material-icons right">mode_edit</i></a></td>
      <td class="button-cell"><a class="modal-trigger waves-effect waves-light btn red" href="#contactModal{{_id}}">Delete<i class="material-icons right">delete</i></a></td>
      <!-- Modal Structure -->
      <div id="contactModal{{_id}}" class="modal">
        <div class="modal-content">
          <h4>Delete Contact?</h4>
          <p>Are you sure you want to delete <strong><em>{{fullname}}</em></strong> from the system permanently?</p>
        </div>
        <div class="modal-footer">
          <a href="javascript:void(0)" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
          <a href="javascript:void(0)" class="delete modal-action modal-close waves-effect waves-green btn-flat">Confirm</a>
        </div>
      </div>
    </tr>
  {{/if}}
</template>

js:

Template.SingleContact.onCreated(function(){
  this.editMode = new ReactiveVar(false);
  Blaze._allowJavascriptUrls();
});

Template.SingleContact.onRendered(function(){
  $('.modal-trigger').leanModal();
});

Template.SingleContact.helpers({
  editMode: function(){
    return Template.instance().editMode.get();
  }
});

Template.SingleContact.events({

  //delete contact
  'click .delete'(event){
      event.preventDefault();
      Meteor.call("removeContact", this._id);
      sAlert.error('Contact removed successfully!');
  },

  //engage edit mode
  'click .edit': function(event, template){
    event.preventDefault();
    template.editMode.set(!template.editMode.get());
  },

  //edit autosave function
  'submit .editForm'(event, template){
    event.preventDefault();

    const target = event.target;
    id = this._id;

    const editName = target.full_name.value;
    const editEmail = target.email.value;
    const editPhone = target.phone.value;
    const editPhone2 = target.phone2.value;
    if(target.primaryContact){
      let isChecked = target.primaryContact.checked;
    }else{
      isChecked = false;
    }

    Meteor.call("updateContactInfo", id,editName,editEmail,editPhone,editPhone2,isChecked);
    template.editMode.set(!template.editMode.get());
    sAlert.success(editName + ' updated successfully!');
  }

});

来源：https://stackoverflow.com/questions/52975113/table-row-disappears-when-the-edit-button-is-clicked