Question

我有一个用户/联系人列表，每行的末尾都有一个编辑和删除按钮。删除按钮可以正常工作，但是当单击编辑按钮时，信息行消失并且不进入编辑模式。刷新页面后，将返回信息行。我已经为此工作了一段时间，但似乎无法弄清楚为什么会这样。我已经将其与网站上的其他代码进行了比较，在该网站上，编辑模式可以正常工作，并且所有代码都可以签出，但这仍然在发生。我已经尝试过console.log-ing并且没有报告的错误。我之前曾发布过：Table row disappears when the edit button is clicked 有谁对为什么发生发生有任何理论？

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>
      {{#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}}
    </form>
  {{else}}
    <tr>
      <td>{{fullname}}</td>
      ...
       <td class="button-cell"><a class="edit btn waves-effect 
       waves-light" href="#">Edit<i class="material-icons 
       right">mode_edit</i></a></td>
       ...      
    </tr>
  {{/if}}
</template>

JS代码：

import { Contacts } from 
'../../../../../imports/api/Contacts/Contacts';

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

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());
  },

});

最低限度的HTML：

<template name="SingleContact">
  {{#if editMode}}
    <form class="editForm">

      <tr class="input-field">
        <input id="full_name" name="full_name" value="{{fullname}}" type="text" class="validate" />
      </tr>
    </form>
  {{else}}
    <tr>
      <td>{{fullname}}</td>
      <td>{{email}}</td>
      <td>{{phone}}</td>
      <td>{{phone2}}</td>
  <td class="button-cell"><a class="edit btn waves-effect waves-light" 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>
        </tr>
    {{/if}}
</template>

Answer 1

您最有可能遇到HTML问题：

您的{{#if editMode}}模板条件的2个块不相等：{{else}}块正确包含<tr>表行，而另一个不行。
<table>不能有直子，除了thead，tbody，tfooter或直接tr。大多数浏览器会消除（取消）此列表中未包含的元素，这些元素可能会应用于您的<form>标签。通常的解决方法是放置一个包装整个表格的表单，或者如果您实际上并不依靠它来http发布表单数据（但是您也丢失了“按回车键”来提交表单），则可以删除表单标签功能），这可能是您的情况，因为您使用Meteor处理应用程序，并且可能不希望重新加载页面来记录修改。

如何使用editMode，点击“ edit”按钮后信息消失

1 个答案: