模态引导消失与变更事件流星 [英] Modal bootstrap disapear with change event meteor

问题描述

我使用带有引导程序的模态，所以我有一个带有3个选项卡的模态.在其中一个标签中，我有一个类似的选择:

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 ...

对于这个模板，我有一个像这样的JS文件:

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...

您有解决方案吗?

推荐答案

我认为这种情况是在幕后进行的:

I think this scenario is happening under the hood :

• 您可以使用Javacript jQuery插件调用打开(显示)模态，该调用基本上会修改DOM(添加CSS类和东西以使模态可见).
• 然后在模态中发生更改事件，这导致Meteor重新定义模版(如在模板中定义)，从而清除了显示的" css类.
• 这会导致模态消失，因为它已在隐藏状态下重新呈现.

那可行的解决方案是什么?

So what are the viable solutions ?

首先，我将通知您，Meteor的这一特定部分目前正在由核心开发人员(Meteor UI项目)重写，并且在不久的将来(1-3个月)，我们将实现无痛的jQuery插件集成，由于Meteor DOM重新呈现不会再擦除整个DOM，因此新引擎非常聪明，可以使对DOM属性的修改保持不变！

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 !

因此，基本上，您的代码在不久的将来可能会轻松工作，但并不是每个人都可以耐心等待，所以这里是Meteor开发人员提出的解决方案(他们在各方示例中实现了此解决方案).

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).

您将需要另一个表示模态状态的Session变量:显示/隐藏. 如果变量为true，则调用模态显示状态"的模板(如果不执行任何操作). 这意味着您将不得不放弃模态转换(淡入/淡出)，但是它将允许您的模态模板正常地重新呈现.

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.

这是模式代码:(使用Bootstrap 3！)

Here is the pattern code : (using 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">&times;</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:

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

父模板:

<template name="parent">
    {{> myModal}}
    <button class="show-my-modal-button" type="button">
        Show Modal
    </button>
</template>

父javascript:

parent javascript :

Template.parent.events({
    "click .show-my-modal-button":function(){
        Session.set("show-my-modal",true);
    }
});

这篇关于模态引导消失与变更事件流星的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！