模态引导程序随着更改事件流星而消失
[英] Modal bootstrap disapear with change event meteor
本文介绍了模态引导程序随着更改事件流星而消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用带有引导程序的模态，所以我有一个带有 3 个选项卡的模态.在此选项卡之一中，我有一个这样的选择:
<ul class="nav nav-tabs" id="TabModal"><li><a href="#onglet1" data-toggle="tab">Libre</a></li><li><a href="#onglet2" data-toggle="tab">Complexe</a></li><li><a href="#onglet3" data-toggle="tab">问卷</a></li><div class="tab-content"><div class="tab-pane" id="onglet1"><span class="label label-primary">选择您的收藏:</span><br/><br/>{{>eachCollections}}{{#if 集合选择 1}}<label style="float:left;">Par : </label><select class="form-control" style="width:200px;float:left;"id="widgetFilterSelectPanelistes"><option value="none">-- none --</option><option value="name">Name</option><option value="age">年龄</option><option value="city">City</option></选择>{{>eachKeyPanellistes}}{{#if panelistChoose "name"}}<select class="form-control" style="width:200px;">{{#每个小组成员}}<option value="{{name}}">{{nom}}</option>{{/每个}}</选择>{{/如果}}{{别的}}{{#if collectionChoose 2}}<p>参与者</p>{{/如果}}{{/如果}}
在模态中我使用一个选择，当我改变选择值时，我显示另一个选择等......
对于这个模板，我有一个像这样的 JS 文件:
Template.eachCollections.helpers({集合:函数(){返回收集.find();}});Template.eachCollections.events({'改变#eachCollectionsSelect':函数(){var selected = document.getElementById('eachCollectionsSelect').value;Session.set('selectedCollections', selected);}});Template.widgetFilter.collectionChoose = 函数(参数){返回 parseInt(Session.get('selectedCollections')) === param;}
但是当我在选择更改时触发事件时，模态消失...
你有解决方案吗?
解决方案
我认为这种情况正在发生:
- 您使用 javacript jQuery 插件调用打开(显示)模态，这基本上修改了 DOM(添加 css 类和内容以使模态可见).
- 然后在模态中发生更改事件，这导致 Meteor 重新渲染模态，因为它是在模板中定义的，消除了显示"的 css 类.
- 这会导致模态消失，因为它在隐藏状态下重新渲染.
那么可行的解决方案是什么?
首先，我会让你知道 Meteor 的这一特定部分目前正在由核心开发人员(Meteor UI 项目)重写，在不久的将来(1-3 个月)，我们将实现无痛的 jQuery 插件集成，因为 Meteor DOM 重新渲染不会再擦除整个 DOM，所以新引擎足够智能，可以保持对 DOM 属性的修改不变！
因此，基本上您的代码在不久的将来可能会轻松运行，但不是每个人都能耐心等待，所以这里是 Meteor 开发人员提出的解决方案(他们在聚会示例中实现了它).
您将需要另一个表示模态状态的会话变量:显示/隐藏.如果变量为真，则在显示状态中调用模态模板，如果不是，则不执行任何操作.这意味着您将不得不放弃模态转换(淡入/淡出)，但它将允许您的模态模板正常重新渲染.
这是模式代码:(使用 Bootstrap 3 ！)
模态模板:
{{#if showModal}}<!-- 这是从一开始就完全展示的背景--><div class="modal-backdrop淡入"></div><!-- css ".show" 类 == 模态完全显示--><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">模态标题</h4>
<div class="modal-body">模态体
<div class="modal-footer"><button type="button" class="cancel btn btn-default">Cancel</button><button type="submit" class="btn btn-primary">提交</button>
</表单>
{{/ID}}
模态javascript:
Template.myModal.created=function(){Session.set("show-my-modal",false);};Template.myModal.helpers({显示模式:功能(){return Session.get("show-my-modal");}});Template.myModal.events({点击 .close，点击 .cancel":function(){Session.set("show-my-modal",false);},提交表单":函数(事件){event.preventDefault();//Session.set("show-my-modal",false);}});
父模板:
{{>我的模态}}<button class="show-my-modal-button" type="button">显示模态
父javascript:
Template.parent.events({点击 .show-my-modal-button":function(){Session.set("show-my-modal",true);}});
I use a modal with bootstrap, so I have a modal with 3 tabs. In one of this tab I have a select like this :
<div class="modal-body">
<ul class="nav nav-tabs" id="TabModal">
<li><a href="#onglet1" data-toggle="tab">Libre</a></li>
<li><a href="#onglet2" data-toggle="tab">Complexe</a></li>
<li><a href="#onglet3" data-toggle="tab">Questionnaire</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="onglet1">
<span class="label label-primary">Choose your collections :</span><br /><br />
{{>eachCollections}}
{{#if collectionChoose 1}}
<label style="float:left;">Par : </label>
<select class="form-control" style="width:200px;float:left;" id="widgetFilterSelectPanelistes">
<option value="none">-- none --</option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="city">City</option>
</select>
{{>eachKeyPanelistes}}
{{#if panelistChoose "name"}}
<select class="form-control" style="width:200px;">
{{#each panelistes}}
<option value="{{name}}">{{nom}}</option>
{{/each}}
</select>
{{/if}}
{{else}}
{{#if collectionChoose 2}}
<p>participants</p>
{{/if}}
{{/if}}
In the modal I use a select and when I change the select value I show an other select etc ...
For this template I have a JS file like this :
Template.eachCollections.helpers({
collections : function () {
return Collec.find();
}
});
Template.eachCollections.events({
'change #eachCollectionsSelect' : function () {
var selected = document.getElementById('eachCollectionsSelect').value;
Session.set('selectedCollections', selected);
}
});
Template.widgetFilter.collectionChoose = function (param) {
return parseInt(Session.get('selectedCollections')) === param;
}
But when I trigge the event on the select change, the modal disepear...
Do you have a solution ?
解决方案
I think this scenario is happening under the hood :
- You open (show) the modal with a javacript jQuery plugin call, which basically modifies the DOM (adding css classes and stuff to make the modal visible).
- Then a change event occurs in the modal, which cause Meteor to rerender the modal AS IT WAS DEFINED IN THE TEMPLATE, wiping out the "shown" css classes.
- This cause the modal to disappear because it is rerendered in the hidden state.
So what are the viable solutions ?
First, I'll have let you know that this particular part of Meteor is currently being rewritten by core developers (Meteor UI project) and in a near future (1-3 months) we'll have painless jQuery plugins integration, because Meteor DOM rerendering won't wipe the entire DOM anymore, the new engine is smart enough to leave modifications to DOM attributes untouched !
So basically your code might work painlessly in a near future BUT not everyone can be patient enough to wait, so here is the solution Meteor developers came up (they implemented it in the parties example).
You'll need another Session variable representing the state of the modal : shown/hidden.
If the variable is true, then call the template for the modal IN THE SHOWN STATE, if it isn't do nothing.
It means that you'll have to give up on modal transitions (fade in/out), but it will allow your modal template to rerender normally.
Here is the pattern code : (using Bootstrap 3 !)
modal template :
<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>
modal 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);
}
});
parent template :
<template name="parent">
{{> myModal}}
<button class="show-my-modal-button" type="button">
Show Modal
</button>
</template>
parent javascript :
Template.parent.events({
"click .show-my-modal-button":function(){
Session.set("show-my-modal",true);
}
});
这篇关于模态引导程序随着更改事件流星而消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
