单击编辑按钮时表行消失

Question

当我单击编辑按钮时，整行都消失了，就好像它已被删除一样，并且没有进入模板的editMode。如果刷新页面，则会返回该行。我曾尝试注释掉代码以在其中找到问题，但这又很干净。我引用了在editMode中可以正常工作的其他代码，两者没有区别。而且我尝试了谷歌搜索。 如何更改/添加到代码中以使其进入editMode？

使用Meteor平台创建。 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!');
  }

});