我认为这种情况正在幕后发生:
- 您可以使用 javascript jQuery 插件调用打开(显示)模式,这基本上会修改 DOM(添加 css 类和内容以使模式可见)。
- 然后模态中发生更改事件,这会导致 Meteor 按照模板中定义的方式重新渲染模态,从而清除“显示的”CSS 类。
- 这会导致模态消失,因为它在隐藏状态下重新渲染。
那么可行的解决方案有哪些呢?
首先,我会让您知道 Meteor 的这个特定部分目前正在由核心开发人员(Meteor UI 项目)重写,在不久的将来(1-3 个月)我们将轻松集成 jQuery 插件,因为 Meteor DOM重新渲染不会再擦除整个 DOM,新引擎足够智能,可以保持对 DOM 属性的修改不变!
所以基本上你的代码可能会在不久的将来毫无痛苦地工作,但并不是每个人都能有足够的耐心等待,所以这里是 Meteor 开发人员提出的解决方案(他们在各方示例中实现了它)。
您将需要另一个表示模式状态的会话变量:显示/隐藏。
如果变量为真,则在显示的状态下调用模态模板,如果不是,则不执行任何操作。
这意味着您必须放弃模式转换(淡入/淡出),但它将允许您的模式模板正常重新渲染。
这是模式代码:(使用 Bootstrap 3!)
模态模板:
<template name="myModal">
{{#if showModal}}
<!-- this is the backdrop fully shown from the beginning -->
<div class="modal-backdrop fade in"></div>
<!-- css ".show" class == modal fully shown -->
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
Modal Body
</div>
<div class="modal-footer">
<button type="button" class="cancel btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
{{/id}}
</template>
模态 JavaScript :
Template.myModal.created=function(){
Session.set("show-my-modal",false);
};
Template.myModal.helpers({
showModal:function(){
return Session.get("show-my-modal");
}
});
Template.myModal.events({
"click .close, click .cancel":function(){
Session.set("show-my-modal",false);
},
"submit form":function(event){
event.preventDefault();
//
Session.set("show-my-modal",false);
}
});
父模板:
<template name="parent">
{{> myModal}}
<button class="show-my-modal-button" type="button">
Show Modal
</button>
</template>
父 JavaScript :
Template.parent.events({
"click .show-my-modal-button":function(){
Session.set("show-my-modal",true);
}
});