如何与editMode接洽，单击编辑按钮时信息消失
如何与editMode接洽，单击编辑按钮时信息消失
提问于 2019-04-18 00:49:45
我有一个用户/联系人列表，每行末尾都有一个编辑和删除按钮。删除按钮正常工作，但当单击编辑按钮时，信息行将消失，并且不会进入编辑模式。刷新页面时返回信息行。我已经为此工作了一段时间，但似乎不明白为什么会发生这种情况。我已经将它与编辑模式工作的网站的其他代码进行了比较，这一切都得到了验证，但这种情况仍在发生。我尝试过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>回答 1
Stack Overflow用户
发布于 2019-04-18 08:39:29
您很可能遇到了HTML问题：
- 您的
{{#if editMode}}模板条件的两个块不相等：{{else}}块正确地包含<tr>表行，而另一个块则不是。 - a
<table>不能有除thead、tbody、tfooter或直接tr之外的直接子项。大多数浏览器将删除(提升)不在此列表中的元素，这可能适用于您的<form>标记。通常的解决方法是放置一个表单来包装整个表格，或者如果您实际上并不依赖表单标记来http post表单数据(但是您也失去了“按Enter键”来提交表单功能)，那么就去掉表单标记，这可能就是您的情况，因为您使用Meteor处理应用程序，并且可能不希望重新加载页面来记录modifications.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55732534
复制相关文章
相似问题